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互联 网 技术 日 新 月 异 。2011 年 以 前 ，HTML5 和 CSS3 看 起 来 还 遥 不 可 及 ， 如 今 对 跨 平 
台 开 发 、 离 线 Web 应 用 的 需求 ， 使 得 HTMLS 取代 HTMLA 技术 从 而 成 为 Web 前 端 主流 技 
术 ， 很 多 公司 都 已 经 开始 运用 HTMLS. CSS3 技术 作为 Web 前 端 开发 的 主要 工具 ， 诸 如 
Chrome、Safari、Firefox 和 Opera 等 主流 浏览 器 已 逐步 完善 对 它们 的 支持 。 

从 前 端 开 发 技术 看 ， 互 联网 发 展 经 历 了 三 个 阶段 : 第 一 阶段 是 Web 1.0 的 内 容 为 主 的 网 
络 , 主流 技术 是 HIML 和 CSS; 第 二 阶段 是 Web 2.0 的 Ajax 应 用 ,热门 技术 是 JavaScripVDOM/ 
异步 数据 请 求 ， 第 三 阶段 是 即将 迎 来 的 HTMLS«CSS3 技术 ， 这 两 者 相辅相成 ， 使 互联 网 又 
进入 一 个 崭新 的 时 代 。 

HTML5+CSS3 黄 定 了 打造 下 一 代 Web 应 用 的 基础 。HTMLS 被 设计 为 跨 平 台 的 技术 ， 
只 需要 一 款 主 流 浏 览 器 即 可 运行 ， 比 如 PC 机 上 最 新 版 本 的 Apple Safari, Google Chrome. 
Mozilla Firefox, Opera, Microsoft Internet Explorer 等 浏览 器 ， 都 几乎 完全 支持 HIMLS 的 特 
TE; iPhone. iPad 及 Android 等 移动 设备 上 的 浏览 器 对 HTMLS 的 支持 性 也 非常 好 。 

本 书 系统 地 讲解 HTMLS 和 CSS3 的 基础 理论 和 实际 运用 技术 ， 书 中 辅 以 大 量 的 实例 进 
行 讲解 ， 其 中 着 重 讲解 如 何 使 用 HTML5+CSS3 进行 Web 应 用 和 网 页 布局 。 全 书 注重 实际 操 
作 ， 使 读者 在 学 习 技术 的 同时 ， 掌 握 Web 开发 和 设计 的 精髓 ， 提 高 综合 应 用 能 力 。 

本 书 特色 

e 系统 的 基础 知识 

本 书 由 浅 入 深 地 系统 讲解 HTML5+CSS3 的 基础 知识 及 使 用 场景 ， 从 技术 的 产生 原因 、 
变迁 ， 再 到 HTMLS 中 的 表现 、 使 用 场景 、 使 用 方法 ， 循 序 渐进 地 进行 介绍 ， 并 配合 精 选 案 
例 辅 助 读者 加 强 对 基础 知识 点 的 理解 。 

。 大 量 精 选 案例 

本 书 为 了 向 读者 清晰 地 传达 每 一 个 知识 点 的 含义 ， 精 选 了 大 量 案例 ， 并 且 全 书 结合 实际 
项 目 制作 的 需求 来 进行 讲解 ， 使 读者 能 够 真正 做 到 学 以 致 用 。 

e 深入 剖析 应 用 开发 和 布局 

本 书 在 介绍 CSS3 的 时 候 ， 使 用 了 相当 大 的 篇 幅 重点 介绍 应 用 布局 的 方法 和 技巧 ， 并 配 
合 经 典 布局 案例 来 帮助 读者 理解 项 目 中 常用 的 布局 技术 ， 以 做 到 活 学 活用 。 

本 书 从 内 容 上 可 分 为 三 部 分 ， 共 18 章 ， 具 体 结构 划分 如 下 : 

第 一 部 分 HTMLS5 部 分 ， 包 括 第 1 章 一 第 10 章 。 这 部 分 全 面 讲 述 HTMLS 和 CSS3 网 
页 设计 基础 知识 体系 ， 主 要 内 容 包 括 : Web 开发 概述 、HTML/XHTML/HTMLS 发 展 历程 、 
HTMLS 文档 的 创建 、HIMLS 表单 的 使 用 、 图 形 /图 像 的 绘制 、 音 频 和 视频 的 播放 与 控制 、 
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本 地 存储 体系 概述 与 应 用 、 离 线 应 用 程序 开发 、Web Workers 多 线程 处 理 、 移 动 互联 网 中 的 
地 图 定位 等 技术 。 

第 二 部 分 : CSS3 部 分 ， 包括 第 11 章 ~~ 第 17 章 。 这 部 分 主要 讲解 CSS3 的 新 特性 和 新 用 
法 ， 以 实现 在 简单 的 代码 中 能 够 设计 更 加 精彩 的 网 页 效果 ， 主 要 内 容 包 括 : CSS3 概述 ，CSS 
选择 器 ， 定 义 文本 、 字 体 与 颜色 ， 设 计 背 景 和 边框 ， 使 用 2D 变形 ， 设 计 动 画 ， 设 计 多 栏 布 
局 、 盒 子 布 局 和 弹性 盒 布 局 等 知识 。 

第 三 部 分 为 第 18 章 。 第 18 章 是 综合 实例 ， 通 过 典型 的 企业 网 站 建设 流程 和 手机 阅读 器 
的 开发 ， 使 读者 能 够 熟悉 实际 项 目的 开发 流程 ， 掌 握 系统 使 用 HTML5+CSS3 技术 来 开发 项 
目的 方法 。 

本 教程 内 容 丰 富 、 结 构 合 理 、 思 路 清晰 、 语 言 简练 流畅 、 示 例 翔 实 。 每 一 章 的 引言 部 分 
概述 该 章 的 内 容 及 学 习 目 标 。 在 每 一 章 的 正文 中 ， 结 合 所 讲述 的 关键 技术 和 难点 ， 穿 插 了 大 
量 极 富 实用 价值 的 示例 。 每 一 章 末尾 都 安排 了 有 针对 性 的 思考 题 和 练习 题 ， 思 考题 有 助 于 读 
者 巩固 所 学 的 基本 概念 ， 练 习题 有 助 于 培养 读者 的 实际 动手 能 力 、 增 强 对 基本 概念 的 理解 和 
实际 应 用 能 力 。 

本 书面 向 期 望 学 习 HTML 和 CSS 的 Web 开发 人 员 , 适合 作为 高 等 院 校 相关 专业 的 教材 ， 
也 适合 从 事 网 页 设计 制作 和 网 站 建设 的 人 员 学 习 。 

除 封面 署名 的 作者 外 ， 参 加 本 书 编写 的 人 员 还 有 周 爱 萍 、 届 文 斌 、 万 乌 、 张 春 辉 、 梅 泉 
滔 、 杨 永 好 、 郑 梦 成 、 孙 红 胜 、 何 玉 华 、 李 文静 、 冯 波 、 马 协 隆 、 马 金 帅 、 张 晓 蛤 、 张 梦 甜 、 
李 亮 等 。 由 于 作者 水 平 有 限 ， 本 书 难免 有 不 足 之 处 ， 欢 迎 广大 读者 批评 指正 。 我 们 的 信箱 是 
huchenhao@263.net， 电 话 是 010-62796045。 

本 书 的 电子 课件 、 习题 答案 和 实例 源 文件 可 以 到 http://www.tupwk.com.cn/downpage 网 站 
下 载 。 
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第 1 章 Web 开 发 新 时 代 


HTMLS 自 2010 年 推出 以 来 ， 受 到 各 大 浏览 器 厂商 的 支持 和 广大 开发 人 员 的 喜爱 。2010 
年 ， 微 软 正 9 预览 版 在 MIX10 大 会 上 首次 公开 亮相 ， 工 程 师 在 介绍 时 ， 从 前 端 角度 将 Web 
发 展 历程 分 为 三 个 阶段 : 第 一 个 阶段 为 Web 1.0， 主 流 技术 是 HIML 和 CSS; 第 二 阶段 为 
Web 2.0， 主 流 技术 为 Ajax 应 用 ， 如 JavaScripWDOM/ 异 步 数 据 请求 ， 第 三 阶段 则 是 即将 到 来 
的 HTML5+CSS3 阶段 。2014 年 10 月 29 日 ， 万维网 联盟 宣布 ， 经 过 几乎 8 年 的 艰辛 努力 ， 
HTMLS 标准 规范 终于 最 终 制定 完成 并 公开 发 布 ， 这 宣告 Web 开发 正式 进入 第 三 个 阶段 。 
本 章 学 习 目 标 : 
e 了 解 什么 是 HTML5， 以 及 HTML5 相 比 之 前 版 本 的 HTML 有 哪些 区 别 
e 了解 世界 各 大 知名 浏览 器 目前 的 发 展 策略 ， 以 及 为 什么 它们 都 不 约 而 同 地 把 支持 
HTMLS 当成 目前 的 工作 重点 ,就 连 微软 也 把 全 面 支持 HTMLS5 作为 正 浏览 器 的 开发 
重点 与 主要 宣传 手段 
e 了 解 为 什么 开发 者 今后 可 以 大 胆 地 使 用 HTML5 进行 Web 网 站 与 Web 应 用 程序 的 开 
发 ， 以 及 HIML5 被 正式 推广 以 后 ， 之 前 的 Web 网 站 与 Web 应 用 程序 怎么 办 
e 了 解 HIMLS 到 底 可 以 解决 哪些 问题 


11 HTMLS 概述 














2004 年 成 立 的 Web 超 文本 应 用 技术 工作 组 (Web Hypertext Application Technology 
Working Group, WHATWG) 创 立 了 HTMLS 规范 , 同时 开始 专门 针对 Web 应 用 开发 新 的 功能 。 
2006 年 ，W3C 介入 HIMLS 的 开发 ， 并 于 2008 年 发 布 HIMLS 的 工作 草案 。2009 年 ，W3C 
停止 对 XHTML2 的 更 新 。2010 «E, HTMLS 开始 用 于 解决 实际 问题 。 这 时 ， 各 大 浏览 器 厂商 
开始 对 旗下 产品 进行 升级 以 支持 HTMLS 的 新 功能 ,因此 ,HIML5 规范 得 到 持续 的 完善 .2014 
年 10 月 29 H, HTMLS5 规范 终于 最 终 制定 完成 并 公开 发 布 。 


1.14.1 HTML5 的 目标 


HTMLS 的 目标 是 创建 更 简单 的 Web 程序 ， 书 写 出 更 简洁 的 HTML 代码 。 例如, 为 了 使 
Web 应 用 程序 的 开发 变 得 更 容易 ， 提 供 了 很 多 API 为 了 使 HIML 变 得 更 简洁 ， 开 发 出 了 新 
的 属性 、 新 的 元 素 ， 等 等 。 总 体 来 说 ， HITMLS 为 下 一 代 Web 平台 提供 了 许 许 多 多 新 的 功能 。 

HTMLS 提供 了 以 下 革命 性 的 新 功能 : 

首先 ， 在 HIMLS 之 前 ， 有 很 多 功能 必须 使 用 JavaScript 等 脚本 语言 才能 实现 ， 璧 如 在 
登录 页 面 中 经 常 使 用 的 让 文本 框 获得 光标 焦点 的 功能 。 如 果 使 用 HIML5， 同 样 的 功能 只 要 
使 用 元 素 的 属性 标签 即 可 实现 。 这 样 的 话 ， 整 个 页 面 就 变 得 非常 清楚 、 直 观 且 容 易 理解 。 因 
Jt, Web 设计 者 可 以 非常 放心 大 胆 地 使 用 HTMLS 中 这 些 新 增 的 属性 标签 。 由 于 HIMLS 中 
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提供 了 大 量 的 这 种 可 以 替代 脚本 的 属性 标签 , 使 得 开发 出 来 的 界面 语言 也 变 得 更 加 简洁 易 懂 。 
不 但 如 此 ，HIMLS 使 页 面 结构 变 得 清楚 明了 。 之 前 使 用 的 div 标签 也 不 再 使 用 了 ， 而 是 
使 用 HTMLS 提供 的 更 加 语义 化 的 结构 标签 。 这 样 书写 出 来 的 界面 结构 显得 非常 清晰 ， 各 部 
位 要 展示 什么 内 容 也 一 目 了 然 。 
虽然 HTMLS 宣称 的 立场 是 “ 非 革命 性 的 发 展 ”， 但 是 它 所 带 来 的 功能 是 让 人 渴望 的 ， 
使 用 它 进行 设计 也 是 简单 的 ， 因 此 深 受 Web 设计 者 和 Web 开发 者 的 欢迎 。 


1.4.2. HTML5 新 特性 


1. 兼容 性 

考虑 到 互联 网 上 HTML 文档 已 经 存在 二 十 多 年 了 ， 因 此 支持 所 有 现存 HTML 文档 是 非 
常 重要 的 。HTMLS 不 是 颠覆 性 的 创新 ， 它 的 核心 理念 就 是 要 保持 与 过 去 技术 的 兼容 和 过 渡 。 
一 旦 浏览 器 不 支持 HTMLS5 的 某 项 功能 ， 针 对 该 功能 的 备 选 行为 就 会 悄悄 进行 。 

2. 合理 性 

HTMLS 新 增加 的 元 素 都 是 经 过 对 现 有 网 页 和 用 户 习 惯 进行 跟踪 、 分 析 和 概括 而 推出 的 。 
例如 ，Google 分 析 了 上 百 万 个 页 面 ， 从 中 分 析出 div 标签 的 通用 ID 名 称 ， 并 且 发 现 其 重复 
量 很 大 , 如 很 多 开发 人 员 使 用 <div id="header"> 来 标记 页 眉 区 域 。 为 了 解决 实际 问题 , HTMLS 
直接 添加 了 一 个 <header> 标 签 。 也 就 是 说 ，HTML5 新 增 的 很 多 元 素 、 属 性 或 功能 都 是 根据 现 
实 互联 网 中 已 经 存在 的 各 种 应 用 进行 技术 精炼 ， 而 不 是 在 实验 室 中 理想 化 地 虚构 新 功能 。 

3. 效率 

HIMLS 规范 是 基于 用 户 优先 准则 编写 的 ， 宗 旨 是 “用 户 即 上 帝 ”， 这 意味 着 在 过 到 无 法 
解决 的 冲突 时 , HTMLS 规范 会 把 用 户 放 在 第 一 位 , 其 次 是 页 面 作者 , 再 次 是 实现 者 (或 浏览 器 )， 
接着 是 规范 制定 者 (W3C/WHATWG)， 最 后 才 考 虑 理论 的 纯粹 性 。 因 此 ，HTMLS5 的 绝 大 部 分 
功能 是 实用 的 ， 只 是 在 有 些 情况 下 还 不 够 完美 。 例 如 ， 下 面 的 几 种 代码 写法 在 HTMLS 中 都 
能 被 识别 : 

id-"prohtml5" 

id-prohtml5 

ID-"prohtml5" 

当然 ， 上 面 几 种 写法 比较 混乱 ， 不 够 严谨 ， 但 是 从 用 户 开 发 角度 考虑 ， 用 户 不 在 乎 代码 
怎么 写 ， 根 据 个 人 习惯 书写 反而 能 提高 代码 编写 效率 。 当 然 ， 我 们 并 不 提倡 初学 者 一 开始 写 
代码 就 这 样 随意 、 不 严谨。 

4. 安全 性 

为 保证 安全 ，HIMLS 规范 引入 了 一 种 新 的 基于 来 源 的 安全 模型 ， 该 模型 不 仅 易 用 ， 而 
且 各 种 不 同 API 都 可 通用 。 这 个 安全 模型 不 需要 借助 任何 所 谓 聪明 、 有 创意 却 不 安全 的 hack 
就 能 跨 域 进行 安全 对 话 。 

5. 分 离 

在 清晰 分 离 表现 与 内 容 方面 , HTMLS 迈 出 了 很 大 一 步 。 HTMLS5 在 所 有 可 能 的 地 方 都 努 
力 进行 了 分 离 , 包括 HTML f CSS. 实际 上 , HTMLS5 规范 已 经 不 支持 旧版 HTML 的 大 部 分 
表现 功能 了 。 
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6. 简单 

HTMLS 要 的 就 是 简单 , 避免 不 必要 的 复杂 性 。 为 了 尽 可 能 简单 , HTMLS 做 了 以 下 改进 : 

e 以 浏览 器 原生 能 力 替代 复杂 的 JavaScript 代码 。 

简化 的 DOCTYPE。 

简化 的 字符 集 声明 。 

简单 而 强大 的 HTMLS API。 

通用 

通用 访问 的 原则 可 以 分 成 如 下 3 个 概念 : 

可 访问 性 : 出 于 对 残疾 人 士 的 考虑 , HTMLS 与 WAI(Web Accessibility Initiative, Web 

可 访问 性 倡议 ) 和 ARIA(Accessible Rich Intemet Application, 可 访问 的 富 Internet 应 用 ) 
做 到 了 紧密 结合 , WALARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添加 到 HIML 中 。 

e 媒体 中 立 : 如 果 可 能 的 话 ，HTMLS 的 功能 在 所 有 不 同 的 设备 和 平台 上 应 该 都 能 正常 


N o o o 


n 
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运行 。 
。 支持 所 有 语种 : 例如， 新 的 <body> 元 素 支持 在 东亚 地 区 页 面 排版 中 会 用 到 的 Ruby 
注释 。 
8. 无 插件 


在 传统 Web 应 用 中 ， 很 多 功能 只 能 通过 插件 或 复杂 的 hack 来 实现 ， 但 在 HTMLS 中 提 
供 了 对 这 些 功 能 的 原生 支持 。 插 件 方式 存在 很 多 问题 ; 

o 插件 安装 可 能 失败 。 

o 插件 可 以 被 禁用 或 屏蔽 (如 Flash 插件 )。 

e 插件 自身 会 成 为 被 攻击 的 对 象 。 

e 插件 不 容易 与 HTML 文档 的 其 他 部 分 集成 ， 因 为 存在 插件 边界 、 剪 裁 和 透明 度 问 题 。 

以 HTMLS 的 canvas 为 例 ， 以 前 在 HTML4 页 面 中 较 难 画 出 对 角 线 ， 而 有 了 canvas 元 素 
就 可 以 轻易 地 实现 了 。 基 于 HTMLS 的 各 类 API 的 优秀 设计 ， 可 以 轻松 地 对 它们 进行 组 合 应 
用 。 例如， 从 video 元 素 中 抓 取 的 帧 可 以 显示 在 canvas 中 ， 用 户 单 击 canvas 即 可 播放 与 该 帧 
对 应 的 视频 文件 。 


1.1.3 HTML5 深 受 欢迎 的 原因 


1. 世界 知名 浏览 器 厂商 对 HTML5 的 支持 
HTMLS 被 说 成 划时代 也 好 ， 具 有 革命 性 也 好 , 如 果 不 被 业界 承认 并 且 大 范围 地 推广 使 用 ， 
这 些 都 没有 意义 。 事 实 上 ， 今 后 HIMLS 被 正式 、 大 规模 地 投入 应 用 的 可 能 性 是 相当 高 的 。 
通过 对 Internet Explorer, Google. Firefox. Safari, Opera 等 主流 Web 浏览 器 的 发 展 策略 
的 调查 ， 发 现 它们 都 在 支持 HTML5 上 采取 了 措施 。 
e 微软: 2010 年 3 月 16 日 ， 微 软 于 美国 拉 斯 维 加 斯 举行 的 MIX10 技术 大 会 上 宣布 推 
出 正 9 浏览 器 开发 者 预览 版 。 微 软 称 ， 正 9 完成 开发 后 ， 会 更 多 地 支持 CSS3、SVG 
fil HTMLS 等 互联 网 浏览 通用 标准 。 
e Google: 2010 年 2 月 19 H, Google Gears 项 目 经 理 伊 安 。 费 特 通 过 博客 宣布 , Google 
将 放弃 对 Gear 浏览 器 插件 项 目的 支持 ， 以 此 重点 开发 HTMLS 项 目 。 据 费 特 表示 ， 
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目前 , 在 Google 看 来 ，Gears 面临 的 主要 问题 是 ， 该 应 用 与 HTMLS 的 诸多 创新 非常 
相似 ， 而 且 Google 一 直 在 积极 发 展 HIMLS 项 目 。 因 此 ， 只 要 Google 不 断 以 加 强 新 
网 络 标准 的 应 用 功能 为 工作 重点 ， 那 么 为 Gears 增加 新 功能 的 意义 就 不 大 了 。 目 前 ， 
多 种 浏览 器 将 会 越 来 越 多 地 为 Gmail 以 及 其 他 服务 提供 更 多 脱 机 功能 方面 的 支持 ， 
因此 Gears 面临 的 需求 也 在 日 益 下 降 ， 这 是 Google 做 出 上 述 调整 的 重要 原因 。 
e 苹果 : 2010 年 6 月 7 日 ,苹果 在 开发 者 大 会 的 会 后 发 布 了 Safari 5， 这 款 浏览 器 支持 
10 个 以 上 的 HTMLS 新 技术 ， 包 括 全 屏幕 播放 、HTML5 1i. HTMLS 地 理 位 置 、 
HTMLS5 切片 元 素 、HTMLS5 的 可 拖 动 属性 、HTMLS5 的 形式 验证 、HTMLS5 的 Ruby. 
HTMLS 的 Ajax 历史 和 WebSocket 字幕 。 
e Opera: 2010 年 5 月 5 日, Opera 软件 公司 首席 技术 官 Hakon Wium Lie 先生 在 访 华 之 
际 ， 接 受 了 中 国 软件 资讯 网 等 少数 几 家 媒体 的 采访 。 号 称 “CSS 之 父 ” 的 他 认为 ， 
HTMLS 和 CSS3 将 是 全 球 互联 网 发 展 的 未 来 趋势 ， 目 前 包括 Opera 在 内 的 诸多 浏览 
器 厂商 ， 纷 纷 在 研发 HTML5 相关 产品 ，Web 的 未 来 属于 HIML5。 
e Mozilla: 2010 年 7 月 ，Mozilla 基金 会 发 布 了 即将 推出 的 Firefox 4 浏览 器 的 第 一 个 早 
期 测试 版 ， 并 在 该 版 本 的 Firefox 浏览 器 中 进行 了 大 幅 改 进 ， 包 括 新 的 HTMLS 语法 
分 析 器 ， 以 及 支持 更 多 HIMLS 形式 的 控制 等 。 从 官方 文档 来 看 ，Firefox 4 对 HTML5 
提供 完全 级 别 的 支持 。 目 前 包括 在 线 视频 、 在 线 音 频 等 多 种 应 用 都 已 在 该 版 本 中 实现 。 
以 上 证 据 表明 ， 目 前 这 些 浏 览 器 都 纷纷 朝 着 支持 HTML5、 结 合 HTMLS5 的 方向 在 迈进 ， 
因此 HTMLS 已 经 被 广泛 推行 开 来 。 
2. 时 代 的 要 求 
现在 的 时 代 已 经 迫切 地 要 求 有 一 个 统一 的 互联 网 通用 标准 。 在 HTMLS 发 布 之 前 的 情况 
是 , 由 于 各 大 浏览 器 之 间 的 不 统一 , 光 是 修改 Web 浏览 器 之 间 的 由 于 兼容 性 引起 的 Bug 就 浪 
费 了 大 量 时 间 。 而 HIMLS 的 目标 就 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 , 在 HTMLS 平台 上 ， 
视频 、 音 频 、 图 像 、 动 画 以 及 同 电脑 的 交互 都 被 标准 化 。 
关于 Web 浏览 器 ,网 页 标准 计划 小 组 设计 并 推出 了 Acid3 测试 , 它 是 针对 网 页 浏览 器 及 
设计 软件 之 标准 相 容 性 的 一 项 测试 。 它 针对 Web 应 用 程序 中 使 用 的 动态 内 容 进 行 检查 ,测试 
焦点 主要 集中 在 ECMAScript, DOM Level 3、Media Queries 和 data:URL 上 。 
Acid3 测试 推出 后 ， 各 大 浏览 器 都 认真 接受 了 它 的 测试 并 希望 能 够 获得 比较 高 的 分 数 。 
这 个 测试 的 设计 者 , 正 是 W3C 的 开发 及 设计 者 , HTMLS 的 重要 人 物 Ian Hickson. Ian Hickson 
是 WHATWG 开发 团队 的 成 员 ， 负 责 Web 标准 的 设计 ， 现 在 是 W3C 的 HTMLS5 工作 组 的 负 
责 人 之 一 。 
Ian Hickson 设计 Acid3 测试 的 意图 ， 是 给 声称 “让 开发 者 能 够 什么 都 不 必 担 心 ， 可 以 放 
心 大 胆 地 进行 开发 ”的 各 大 Web 浏览 器 提供 一 个 机 会 , 让 它们 能 够 以 此 来 证 明 自 己 是 优秀 的 。 
针对 Acid3 的 宣传 是 很 重要 的 ， 要 想 扩 大 Web 浏览 器 的 市 场 份额 ， 宣 称 遵从 它 所 依赖 的 标准 
是 最 有 效 的 宣传 方法 。 


1.1.4 HTML5 的 构成 


























HTMLS 主要 包括 下 面 这 些 功能 : Canvas(2D 和 3D). Channel 消息 传递 、Cross-Document 
消息 传送 、Geolocation 、MathML . Microdata, Server-Send Events, Scalable Vector 
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Graphics(SVG)、WebSocket API 及 协议 、 Web Origin Concept, Web Storage. Web SQL Database, 
Web Workers, XMLHttpRequest Level 2 . 


12 HTMLS 设计 原理 


设计 原理 是 Web 发 展 背后 的 驱动 力 ， 也 是 通过 HTMLS 反映 出 来 的 某 种 思维 方式 。 软 件 
就 像 所 有 技术 一 样 ， 具 有 天 然 的 独裁 性 。 代 码 必 然 会 反映 作者 的 选择 、 偏 见 和 期 望 。 任 何 开 


e 简化 最 常见 的 任务 ， 让 不 常见 的 任务 不 至 于 太 麻烦 。 
e 只 为 80% 设 计 。 

e 给 内 容 创 建 者 最 大 的 权利 。 

e 默认 设置 智能 化 。 


1.2.1 HTML 的 历史 变迁 


HTML 最 早 从 2.0 版 开始 ， 实 际 上 并 没有 HTML 1.0 版 官方 规范 。HTML tags 文档 可 以 
算 作 HTML 的 第 一 个 版 本 ， 但 它 却 不 是 一 个 正式 的 版 本 。 第 一 个 正式 版 本 HIML 2.0 也 不 是 
出 自 W3C 之 手 ， 而 是 由 IETF 制定 的 ， 从 第 三 个 版 本 开始 ，W3C 开始 接手 并 负责 后 续 版 本 
的 制定 工作 。 

20 世纪 90 年 代 ，HTML 有 过 几 次 快速 发 展 。 众 所 周知 ， 那 时 构建 网 站 是 一 项 十 分 复杂 
的 工程 ， 浏 览 器 大 战 曾 令 人 头疼 不 已 ， 市 场 竞争 的 结果 就 是 各 家 浏览 器 里 都 塞 满 了 各 种 专 有 
的 特性 ， 都 试图 在 专 有 特性 上 胜 人 一 筹 。 当 时 的 混乱 不 堪 回 首 ， HTML 还 重 不 重要 ， 或 者 它 
作为 Web 格式 的 前 景 如 何 ， 谁 都 说 不 清楚 。 

从 1997 年 到 1999 4E, HTML 的 版 本 从 3.2 到 4.0, 再 到 4.01, 经 历 了 非常 快 的 发 展 。 问 
题 是 到 了 版 本 4.01 的 时 候 ，W3C 的 认识 发 生 倒 退 ，W3C 并 没有 停止 开发 这 门 语言 ， 只 不 过 
他 们 对 HTML 不 再 感 兴趣 了 。 在 HTML 4.01 之 后 ，W3C 提出 了 XHTML 1.0 的 概念 。 虽 然 
听 起 来 完全 不 同 ， 但 XHTML 1.0 和 HTML 4.01 其 实 是 一 样 的 。 唯 一 不 同 的 是 XHTML 1.0 
要 求 使 用 XML 语法 。 

从 规范 本 身 的 内 容 来 看 ， 本 质 是 相同 的 ， 不 同 之 处 在 于 编码 风格 ， 因 为 浏览 器 读 取 符 合 
HTML 4.01, HTML 32 或 XHTML 1.0 规范 的 网 页 都 没有 问题 。 对 于 浏览 器 来 说 这 些 网 页 都 
是 一 样 的 ， 都 会 生成 相同 的 DOM 树 ， 只 不 过 用 户 更 喜欢 XHTML 1.0， 因 为 不 少 人 认同 它 比 
较 严格 的 编码 风格 。 

到 了 2000 4E, Web 标准 项 目的 活动 开展 得 如 火 如 茶 ， 开 发 人 员 对 浏览 器 里 包含 的 那些 
乱七八糟 的 专 有 特性 已 经 忍无可忍 了 。 当 时 CSS 有 了 长 足 的 发 展 ， 而 且 与 XHTML 1.0 的 结 
合 也 很 紧密 ，CSS+HTML 1.0 可 以 算是 最 佳 实践 了 。 虽 然 HTML 4.01 与 XHTML 1.0 没有 本 
质 上 的 区 别 ， 但 是 大 部 分 开发 人 员 接 受 了 这 种 组 合 。 专 业 的 开发 人 员 能 做 到 元 素 全 部 小 写 ， 
属性 全 部 小 写 ， 属 性 值 也 全 部 添加 引号 。 由 于 专业 人 员 起 到 了 模范 带头 作用 ， 越 来 越 多 的 人 
也 都 开始 支持 这 种 语法 。 

XHTML 1.0 之 后 是 XHTML 1.1, 只 是 小 数 点 后 面 的 数字 变 成 了 1, 而 且 从 词汇 表 的 角度 
看 ， 规 范本 身 没有 什么 新 内 容 ， 元 素 、 属 性 也 都 相同 ， 唯 一 的 变化 就 是 把 文档 标记 为 XML 
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文档 。 而 在 使 用 XHTML 1.0 的 时 候 ， 还 可 以 把 文档 标记 为 HTML。 

但 是 ， 这 样 做 带 来 了 很 多 问题 。 首 先 ， 把 文档 标记 为 XML JE, IE 浏览 器 不 能 处 理 。 当 
JR. IEO 及 其 以 上 版 本 是 可 以 处 理 的 。 作 为 全 球 领先 的 浏览 器 ， 正 无 法 处 理 接收 到 的 XML 
类 型 的 文档 ， 而 规范 又 要 求 以 XML 类 型 来 发 送 文档 ， 这 对 于 广大 用 户 来 说 ， 是 一 件 很 痛苦 
的 事 。 

所 以 说 ，XHTML 1.1 有 点 脱离 实际 ， 而 用 户 不 想 把 文档 以 XML 格式 发 送 给 那些 能 够 理 
解 XML 的 浏览 器 ， 则 是 因为 XML 的 错误 处 理 模型 。XML 的 语法 ， 无 论 是 属性 小 写 、 元 素 
小 写 , 还 是 始终 要 给 属性 值 加 引号 ， 这 些 都 没有 问题 但 XML 的 错误 处 理 模型 确 是 这 样 的 : 
如 果 解 析 器 遇 到 错误 ,停止 解析 。 如 果 把 XHTML 1.1 标记 为 XML 文档 类 型 , 假设 用 Firefox 
打开 这 个 文档 ， 而 文档 中 有 一 个 符号 没有 正确 编码 ， 就 算 整 个 页 面 中 只 有 这 一 处 错误 ， 浏 览 
器 也 会 崩溃 , 用 户 将 看 不 到 任何 网 页 内 容 。 根据 XML 规范 , 这 样 处 理 是 正确 的 , 对 于 Firefox 
而 言 ， 遇 到 错误 就 停止 解析 ， 并 且 不 呈现 其 他 任何 内 容 ， 这 是 严格 按照 XML 规范 处 理 的 。 
因为 它 不 是 HIML，HTML 根本 没有 错误 处 理 模型 ， 但 根据 XML 规范 ， 这 样 做 没 错 。 这 就 
是 为 什么 人 们 不 会 把 文档 标记 为 XML 的 另 一 个 原因 。 

接 下 来 ， 新 的 版 本 是 XHTML 2， 但 是 这 个 版 本 并 没有 完成 。 从 理论 的 角度 来 说 ， 
XHTML 2 是 一 个 非常 好 的 规范 。 如 果 所 有 人 都 同意 使 用 的 话 ， 也 一 定 是 非常 好 的 格式 ， 只 
不 过 它 还 不 够 实际 。 

MIE XHTML 2 仍然 使 用 XML 错误 处 理 模 型 ， 用 户 必须 保证 以 XML 类 型 发 送 文档 ; 
其 次 ，XHTML 2 中 有 意 不 再 向 后 兼容 已 有 的 HTML 版 本 ， 甚 至 曾经 讨论 废除 img 元 素 ， 这 
对 于 每 天 都 在 做 Web 开发 的 人 员 来 说 确实 有 点 难以 接受 ， 理 论 上 分 析 ， 使 用 object 元 素 可 能 

因此 ， 无 论 XHTML 2 在 理论 上 是 多 么 完美 的 一 种 格式 ， 却 从 未 有 机 会 付 诸 实践 。 之 所 
以 难以 付 诸 实践 ， 就 是 因为 开发 人 员 永 远 不 会 支持 它 ， 它 向 后 不 兼容 。 同 样 ， 浏 览 器 厂商 也 
不 会 支持 它 。 

XHTML 1 和 XHTML 2 都 使 用 XML 错误 处 理 模型 ， 但 这 个 错误 处 理 模 型 太 苛刻 了 ， 它 
不 符合 “接收 时 开放 ”这 个 法 则 ， 遇 到 错误 就 停止 解析 ， 这 怎么 能 叫 开 放 呢 ? 


1.2.2 HTML5 开发 动力 





























在 20 世纪 末期 ，W3C 琢磨 着 改良 HIML 语言 。 在 2004 年 W3C 成 员 内 部 的 一 次 研讨 
EE, Opera 公司 的 代表 伊 恩 。 希 克 森 (an Hickson) 提 出 了 一 个 扩展 和 改进 HTML 的 建议 。 
他 建议 新 的 任务 组 可 以 跟 XHTML 2 并 行 ， 但 是 在 已 有 HTML 的 基础 上 开展 工作 ， 目 标 是 对 
HTML 进行 扩展 。 但 是 W3C 投票 表示 反对 ， 因 为 他 们 觉得 XHTML 2 才 是 未 来 的 方向 。 然 
后 ，Opera、Apple 等 浏览 器 厂商 以 及 其 他 一 些 成 员 脱离 了 W3C， 成 立 了 WHATWG(Web 
Hypertext Applications Technology Working Group, Web 超 文本 应 用 技术 工作 组 ), 在 HIML 的 
基础 上 开展 工作 ， 向 其 中 添加 新 东西 。 

WHATWG 的 工作 不 久 就 初 见 成 效 ， 而 W3C 的 XHTML 2 并 没有 实质 性 进展 。 于 是 ， 
W3C 于 2007 年 组 建 了 HTMLS5 工作 组 ， 在 WHATWG 工作 成 果 的 基础 上 继续 开展 工作 ， 上 
伊 恩 。 希 克 森 担任 W3C HTMLS 规范 的 编辑 ， 同 时 兼任 WHATWG 的 编辑 ， 以 方便 新 工作 组 
开展 工作 。 
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这 就 是 我 们 今天 看 到 的 局 面 : 一 种 格式 ， 两 个 版 本 。WHATWG 的 网 站 上 有 这 个 规范 ， 
而 W3C 的 网 站 上 也 有 一 份 。 但 是 ， 这 两 份 成 果 也 是 有 区 别 的 。W3C 最 终 要 制定 一 个 具体 的 
规范 ， 而 WHATWG 还 在 不 断 地 帮 代 ， 将 开发 一 项 简单 的 HTML 或 Web 技术 作为 工作 的 核 
心目 标 。 
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尽管 主流 浏览 器 的 最 新 版 本 都 对 HTMLS 提供 了 很 好 的 支持 , 但 HIML5 毕竟 Él 
因此 在 执行 HTMLS 页 面 之 前 ， 必 须 先 搭建 支持 HTMLS 的 浏览 器 环境 ， 并 检查 浏览 器 是 否 
支持 HIML 标记 。 


1.3.1 搭建 上 机 练习 环境 


目前 ，Microsoft 的 下 GE9+) 浏 览 器 ， 以 及 Mozlilla 的 Firefox 与 Google 的 Chrome 浏览 
器 等 都 可 以 很 好 地 支持 HTML5。 本 书 的 示例 主要 运行 在 Chrome 浏览 器 上 。 


1.8.2. ”检测 浏览 器 是 否 支持 


安装 相应 的 浏览 器 以 后 ， 为 了 能 进一步 了 解 浏览 器 支持 HIMLS 新 标签 的 情况 ， 还 可 以 
在 引入 新 的 标签 前 ， 通 过 编写 JavaScript 代码 来 检测 浏览 器 是 否 支 持 该 标签 
浏览 器 在 加 载 Web. 页 面 时 会 构造 一 个 文本 对 象 模型 (Document Objet Model, DOM). 然 
后 通过 该 文本 对 象 模型 来 表示 页 面 中 的 各 个 HTML 元 素 , 这 些 元 素 被 表示 为 不 同 的 DOM 对 
象 。 全 部 的 DOM 对 象 都 共享 一 些 公共 或 特殊 属性 ， 如 HIMLS 的 某 些 特性 。 如 果 在 支持 该 
属性 的 浏览 器 中 打开 页 面 ， 就 可 以 很 快 检 测 出 这 些 DOM 对 象 是 否 支持 这 些 特性 。 
下 面 以 加 入 画布 标记 为 例 ， 说 明 如 何 检测 浏览 器 对 canvas 标签 的 支持 。 
【 例 1-1】 在 Dreamweaver 中 新 建 一 个 HTML 页 面 ， 保 存 为 index.html， 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
#myCanvas { 
background: red; 
width: 200px; 
height: 100px; 














ji 
</style> 
</head> 
<body> 
«canvas id="myCanvas"> 该 浏览 器 不 支持 HTMLS 的 画布 标记 ! </canvas> 
</body> 
</html> 
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在 浏览 器 中 执行 页 面 文件 mdexhtml， 如 果 浏 览 器 不 支持 HIMLS 的 画布 标记 ， 将 会 显 
示 “ 该 浏览 器 不 支持 HTMLS 的 画布 标记 ! ”; 若 支 持 ， 则 显示 图 1-1 所 示 效 果 。 需 要 注意 
的 是 ， 昌 然 是 同一 个 页 面 ， 但 由 于 不 同 的 浏览 器 对 HTMLS 标记 的 支持 情况 也 不 同 ， 因 此 显示 
的 页 面 效果 也 各 异 。 所 以 ， 在 编写 HTMLS 新 标记 时 ， 有 必要 先 检测 浏览 器 是 否 支 持 该 标记 。 


- mn 
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图 1-1 支持 HIMLS 标记 的 浏览 器 的 显示 结果 
1.3.3 使 用 HTML5 编写 简单 的 Web RE 


与 HIML4 相 比 ，HIMLS 新 增 了 很 多 新 标签 ， 整 体 页 面 结构 也 发 生 了 很 大 变化 。 下 面 
使 用 HTMLS 来 编写 一 个 HTML 页 面 ， 保 存 为 index.html， 在 其 中 加 入 如 下 代码 : 
【 例 1-2】 一 个 简单 的 HTMLS5 页 面 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 第 一 个 HIMLS 页 面 </title> 
</head> 
<body> 
<p>Hello, World</p> 
</body> 
</html> 
该 页 面 的 运行 效果 如 图 1-2 所 示 。 





D 第 一 个 HTMLS 页 面 
© © 127.00.1:8020/ch01/index1.htm| *|: 


Hello, World 





图 1-2 运行 效果 


通过 短 短 几 行 代码 就 完成 一 个 页 面 的 开发 ， 可 见 HTMLS 语法 的 简洁 。 下 面 逐 名 分析 
HTMLS 文档 的 组 成 。 
第 一 行 代码 如 下 : 
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<!DOCTYPE html> 
短 短 几 个 字符 ， 甚 至 不 包括 版 本 号 ， 就 能 告诉 浏览 器 需要 一 个 doctype 来 触发 标准 模式 ， 
简明 扼要 。 接 下 来 的 代码 : 
<meta charset="UTF-8"> 
这 行 代码 说 明了 文档 的 字符 编码 ， 保 证 浏览 器 正确 解析 文档 。HIMLS 不 区 分 字母 、 标 
记 结 束 符 的 大 小 写 以 及 属性 是 否 加 引号 ， 下 面 的 代码 是 等 效 的 : 
«meta charset="utf-8"> 
«META charset="utf-8"> 
<meta charset=UTF-8> 
在 主体 <body> 中 ， 可 以 省 略 主 体 标记 ， 直 接 编写 需要 显示 的 内 容 ， 即 去 掉 <body> 和 
</body> 标 签 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 第 一 个 HIMLS 页 面 <title> 
</head> 
<p>Hello, World</p> 
</html> 
虽然 在 编写 代码 时 可 以 省 略 <html>、<head> 和 <body> 标 记 ， 但 浏览 器 总 能 进行 解析 。 
考虑 到 代码 的 可 读 性 和 可 维护 性 ， 编 写 代码 时 ， 应 该 尽量 增加 这 些 在 HTMLS 中 可 选 的 
元 素 ， 从 而 最 大 限度 地 实现 页 面 代码 的 简洁 和 完整 。 


14 HTMLS 页 面 的 特征 


上 一 节 介 绍 了 一 个 HIMLS 页 面 的 创建 过 程 。 下 面 通 过 一 个 较为 完整 的 页 面 来 介绍 
HTMLS 的 页 面 特征 。 


14.1 使 用 HTML5 的 结构 化 元 素 


通过 研究 Web 页 面 发 现 , 如 果 使 用 一 些 带 有 语义 性 的 标记 , 可 以 加 快 浏览 器 解释 页 面 中 
元 素 的 速度 ， 如 早期 的 <samp>、<var> 元 素 ; HTMLS 继承 了 这 些 元 素 ， 并 根据 用 户 使 用 最 为 
频繁 的 类 名 和 ID 不 断 开 发 新 的 标记 ,因为 这 些 标记 能 真正 体现 开发 者 真实 意图 所 在 。 下 面 通 
过 实例 说 明 HTMLS 是 如 何 使 用 这 些 全 新 的 HTMLS 特征 来 结构 化 元 素 的 。 

【 例 1-3】 本 例 将 页 面 分 成 上 、 中 、 下 3 部 分 。 上 部 用 于 显示 导航 ; 中 部 分 为 两 个 部 分 ， 
左边 设置 菜单 ， 右 边 显示 文本 内 容 ， 下 部 显示 页 面 版 权 信 息 。 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
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header £siderL eft #siderRight #footer{ 


border:solid 1px #666; 
padding: 10px; 
margin: 6px; 
} 
#header (width: 500px:} 
#siderLeft { 
float: left; 
width: 60px; 
height: 100px; 
) 
JisiderRight ( 
float: left; 
width: 400px; 
height: 100px; 
} 
#footer{ 
clear: both; 
width: 500px: 
} 
</style> 
</head> 
<body> 
<div id="header"> 导 航 </div> 
<div id="siderLeft"> 菜 单 </div> 
<div id="siderRight"> 内 容 </div> 
<div id="footer"> 底 部 </div> 
</body> 
</html> 


运行 以 上 代码 ， 效 果 如 图 1-3 所 示 。 
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菜单 内 容 
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Bg 








图 1-3 简单 的 网 页 布局 


尽管 上 述 代码 没有 任何 错误 ， 并 且 可 以 在 HTMLS 环境 中 很 好 地 运行 ， 但 该 页 面 结构 的 


很 多 部 分 对 于 浏览 器 来 说 都 是 未 知 的， 这 是 因为 浏览 器 是 通过 人 D 来 定位 元 素 的 。 





因此 ， 只 要 
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开发 者 不 同 ， 就 允许 元 素 的 ID 各 异 ， 这 会 造成 浏览 器 不 能 很 好 地 表明 元 素 在 页 面 中 的 位 置 ， 
必然 影响 页 面 解析 的 速度 。 幸 好 HTMLS 中 新 增 的 元 素 可 以 很 快 地 定位 某 个 标记 ， 明 确 地 表 
示 页 面 中 的 位 置 。 将 上 述 代码 修改 成 HTMLS5 支持 的 页 面 代码 ， 如 下 所 示 ， 运 行 代码 后 ， 显 
示 的 效果 相同 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
header,nav,article,footer{ 
border: solid 1px #666666; 
padding: 10px; 
margin: 6px; 





} 
header (width: 500px:) 
nav ( 
float: left; 
width: 60px; 
height: 100px; 
} 
article { 
float: left; 
width: 400px; 
height: 100px; 
} 
footer { 
clear: both: 
width: 500px; 
} 
</style> 
</head> 
<body> 
<header> 导 航 </header> 
<nav> 菜 单 <nav> 
<article> 内 容 </article> 
<footer> 底 部 说 明 </footer> 
</body> 
<html> 
虽然 两 段 代 码 不 一 样 ， 但 在 Chrome 浏览 器 中 实现 的 页 面 效 果 相 同 。 从 上 述 两 段 代 码 来 
看 ， 使 用 HIMLS 新 增 元 素 创建 的 页 面 代码 更 加 简单 和 高 效 。 
可 以 看 出 ， 使 用 <div id="header"> 等 标记 元 素 没有 任何 实现 的 意义 ， 即 浏览 器 不 能 根据 
标记 的 ID 属性 来 推断 这 个 标记 的 真正 含义 ， 因 为 D 号 是 可 以 变化 的 ， 不 利于 寻找 。 
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ifj HTMLS 中 的 新 增 元 素 <header> 可 以 明确 告诉 浏览 器 此 处 是 页 头 , <nav> 标 记 用 于 构建 
页 面 的 导航 ，<article> 标 记 用 于 构建 页 面 内 容 的 一 部 分 ，<footer> 元 素 表明 页 面 已 到 页 脚 或 根 
元 素 部 分 ， 并 且 这 些 标记 都 可 以 重复 使 用 ， 极 大 提高 了 开发 者 的 工作 效率 。 
此 外 ， 有 些 新 增 的 HTMLS5 元 素 还 可 以 单独 成 为 一 个 区 域 ， 如 下 所 示 : 
<header> 
<article> 
<hl> 内 容 1<hl> 
article 
«header 
<header> 
<article> 
<h2> 内 容 2</h2> 
</article> 
</header> 
在 HTML5 中 ，<article> 可 以 创建 一 个 新 的 节点 ， 并 且 每 个 节点 都 可 以 有 自己 的 单独 元 
素 ， 如 <hl> 和 <h2>， 这 样 不 仅 使 内 容 区 域 各 自分 段 、 便 于 维护 ， 而 且 代码 简单 ， 局 部 修改 
方便 。 
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在 支持 HTMLS 新 增 元 素 的 浏览 器 中 ， 样 式 化 各 个 新 增 元 素 变 得 十 分 简单 ， 可 以 对 任意 
-个 元 素 应 用 CSS， 包 括 直 接 设 置 或 引入 CSS 文件 。 需 要 说 明 的 是 ， 在 默认 情况 下 ，CSS 默 
认 元 素 的 display 属 性 值 为 inline。 因 此 ,为 了 正确 地 显示 设置 的 页 面 效果 ,需要 将 元 素 的 display 
属性 设置 为 block。 下 面 通过 一 个 简单 的 示例 说 明 这 一 点 。 
【 例 1-4】 在 页 面 中 设置 相关 样式 ， 显 示 一 段 文章 的 内 容 。 
<head> 
«meta charset="UTF-8"> 
<style type="text/css"> 
article (display: block:} 
article header p (font-size: 13px:] 
article header h1 (font-size: 16px:} 
;p-date (font-size: 11px:} 
</style> 
</head> 
<body> 
<article> 
<header> 
<h1><a> 谷 歌 推出 多 项 搜索 功能 避 谈 </a><hl> 
«p class-"p-date" H $H: 2017-04-02</p> 
<p> 网 易 科 技 4 月 2 日 消息 ， 据 媒体 报道 ， 谷 歌 无 人 车 研究 有 了 新 的 进展 ……</p> 
</header> 
</article> 
</body> 
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运行 以 上 代码 ， 效 果 如 图 1-4 所 示 。 
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图 1-4 使 用 CSS 美化 HIMLS 页 面 





由 于 有 些 浏览 器 并 不 支持 HTMLS 中 新 增 的 元 素 , 如 IES 或 更 早 版 本 , 其 CSS 只 应 用 TE 
支持 的 那些 元 素 ， 因此， 为 了 能 为 新 增 的 HTMLS 元 素 应 用 样式 ， 可 以 在 头 部 标记 <head> 中 
加 入 如 下 JavaScript 代码 ， 这 样 就 可 以 应 用 样式 了 : 

<script type="text/javascript"> 
document.createElement(article"); 
document.createElement(header"); 
</script> 

考虑 到 各 浏览 器 的 兼容 性 不 一 样 ， 可 以 对 上 述 JavaScript 代码 进行 优化 ， 即 使 用 条 件 语 

FJER IZ JavaScript 代码 ， 使 浏览 器 只 在 不 支持 HTMLS 的 情况 下 才 执 行 这 段 脚 本 。 


1.5 本 章 小 结 


本 章 是 HIMLS 概述 ， 从 总 体 上 向 读者 介绍 HTMLS 的 全 貌 。 从 总 体 上 来 说 ，HTML5 
的 出 现 与 兴起 并 非 偶然 ， 这 是 业界 专家 与 工程 师 们 直面 过 去 互联 网 技术 的 许多 复杂 问题 ， 总 
结 许多 开发 者 在 实际 项 目 实践 中 经 常 遇 到 的 问题 、 习 惯性 操作 、 解 决 方案 的 基础 上 ， 并 根据 
当前 技术 发 展 的 需要 、 设 计 原 理 等 ， 基 于 HTML 语言 基础 之 上 ,制定 出 来 的 标准 。 本 章 首先 
对 HIMLS 进行 了 概述 ， 简 单 介 绍 了 HIMLS 的 目标 、 新 特性 、 受 欢迎 的 原因 ， 以 及 HIML5 
文档 的 构成 ; 其 次 , 简单 陈述 了 HIMLS 的 设计 原理 ;接着 介绍 了 如 何 搭建 编写 和 运行 HTML5 
的 环境 ， 如 何 编写 HTMLS 文档 ;最 后 介绍 了 HTMLS5 页 面 的 特征 。 希 望 通过 本 章 的 学 习 ， 
读者 能 够 对 HIMLS 有 一 个 总 体 的 认识 。 


1.6 思考 和 练习 


1. 了 解 一 下 HTML 语言 的 历史 变迁 。 

2. 简单 描述 HTMLS5 的 目标 及 特性 。 

3. 搭建 上 机 练习 环境 ， 检 测 浏览 器 是 否 支持 HTML5。 
4. 编写 一 个 HIML5 文档 。 
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1993 *E£, HTML 首次 以 草案 的 形式 发 布 ，20 世纪 90 年 代 是 HTML 发 展 速度 最 快 的 时 
期 ， 直 到 1999 年 的 4.01 版 。 在 这 个 过 程 中 ，W3C 主要 负责 HTML 规范 的 制定 HTML 4.01 
发 布 之 后 ,业界 普遍 认为 HTML 已经 到 了 穷 途 末路 ,对 Web 标准 的 焦点 也 开始 转移 到 了 XML 
和 XHTML 上 ，HTML 被 放 在 了 次 要 的 位 置 。XHTML 以 HTML 为 基础 ， 对 HTML 进行 了 
大 量 的 修改 。 本 章 将 从 总 体 上 介绍 HTMLS 与 以 往 版 本 的 不 同 ， 以 及 HTMLS 和 HIMIA 之 
间 的 区 别 。 

本 章 学 习 目 标 : 
了 解 HTML 语言 的 作用 、 结 构 和 语法 
Tft XHTML 和 XML 的 关系 ， 以 及 XHTML 的 语法 特点 
掌握 HIMLS 的 语法 和 元 素 
掌握 HIML5 中 新 增 的 以 及 废除 的 元 素 
掌握 HIMLS 中 新 增 的 以 及 废除 的 属性 
掌握 HIML5 中 新 增 的 全 局 属性 
掌握 HIML5 中 新 增 的 事件 


2.1 HTML 基础 





HTML 是 目前 互联 网 上 应 用 最 为 广泛 的 语言 , 也 是 构成 网 页 文档 的 主要 语言 。HTML 文 
档 是 由 HTML 标签 组 成 的 描述 性 文本 , HTML 标签 可 以 标识 文字 、 图形 、 动画 、 声 音 、 视频 、 
2.1.1 HTML 简介 


1982 年 ,美国 人 带 姆 " 伯 纳 斯 。 李 为了 方便 世界 各 地 的 物理 学 家 能 够 进行 合作 研究 以 及 
信息 共享 ， 创 造 了 HTML 语言 。1990 年 他 又 发 明了 世界 上 的 第 一 个 浏览 器 。1991 年 3 H, 
他 把 这 个 发 明 介绍 给 了 一 起 在 CERN 公司 工作 的 朋友 , 当时 网 页 浏览 器 被 CERN 公司 在 世界 
各 地 的 成 员 用 来 理 清 CERN 庞大 的 电话 短 。1993 年 ，NCSA 推出 了 Mosaic 浏览 器 并 迅速 爆 
红 , 成 为 世界 上 第 一 个 广泛 应 用 的 浏览 器 , 推动 着 互联 网 迅速 发 展 。 随后 的 5 年 里 , Netscape 
和 Microsoft 两 个 软件 巨头 掀起 了 一 场 互 联网 浏览 器 大 战 。 这 场 战 争 最 后 以 Microsoft 的 
Internet Explorer 完胜 告终 ， 但 它 极 大 地 推动 了 互联 网 的 发 展 ， 把 网 络 带 到 了 千 千 万 万 普通 上 
户 面前 。 从 1993 年 互联 网 工程 工作 小 组 (Intemet Engineering TastForce，IETF) 工 作 草案 发 布 ， 
到 1999 年 W3C 发 布 HIML 4.01 标准 ，HTML 共 经 历 了 5 个 版 本 。 如 今 的 HTML 不 仅 成 为 
Web 上 最 主要 的 文档 格式 ， 而 且 在 个 人 及 商业 应 用 中 都 发 挥 着 极 大 的 作用 。 

HTML 是 Hypertext Markup Language 的 缩写 ， 中 文 译 为 超 文本 标记 语言 。 使 用 HIML 
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标签 编写 的 文档 称 为 HTML 文档 , 目前 最 新 版 本 为 HTML 5.0, 这 是 目前 使 用 最 广泛 的 版 本 。 
HTML 4.01 已 逐步 淘汰 。 

早期 版 本 的 HTML 语言 不 适合 构建 标准 化 网 页 , 因为 它 把 结构 和 表现 混淆 在 一 起 .例如 ， 
HTML 把 不 同类 型 的 元 素 (如 描述 性 元 素 color 和 结构 性 元 素 div. table 等 ) 以 及 元 素 属 性 放 在 
一 起 ， 为 以 后 的 维护 和 管理 埋 下 隐患 。 

XHTML 是 The Extensible HyperText Markup Language 的 缩写 ， 中 文 译 为 可 扩展 标记 语 
言 , 实际 上 它 是 HTML 语言 的 升级 版 本 ， 目 前 遵循 的 是 W3C 于 2000 年 1 月 推荐 的 XHTML 
1.0 标准 。XHTML 和 HTML 在 语法 和 标签 使 用 方面 差别 不 大 。 熟 悉 HTML 语言 ， 再 稍 加 熟 
悉 标准 结构 和 规范 ， 也 就 熟悉 了 XHTML 语言 。XHTML 具有 如 下 特点 : 

e 用 户 可 以 扩展 元 素 ， 从 而 扩展 功能 ， 但 目前 在 1.0 版 本 下 ， 用 户 只 能 够 使 用 固定 的 预 
定义 元 素 , 这 些 元 素 基本 上 与 HTML 4.01 版 本 元 素 相同 , 但 删除 了 部 分 描述 性 的 元 素 。 
e 能 够 与 HTML 很 好 地 沟通 ， 可 以 兼容 当前 不 同 的 网 页 浏览 器 ， 实 现 XHTML 页 面 的 
正确 浏览 。 

2.4.3 HTML 结构 


HTML 文档 一 般 都 应 包含 两 个 部 分 : 头 部 区 域 和 主体 区 域 。HTML 文档 的 基本 结构 由 3 
个 标签 负责 组 织 : <html>、<head> 和 <body>。 其 中 <html> 标 签 标识 HTML 文档 ，<head> 标 签 
标识 头 部 区 域 ， 而 <body> 标 签 标识 主体 区 域 。 一 个 完整 的 HTML 文档 的 基本 结构 如 下 : 
<html> <!-- 语法 开始 -> 
<head> 
<!-- 头 部 信息 ， 如 <title> 标 签 定义 网 页 的 标题 -> 
</head> 

















«t- 主体 信息 ， 包 含 网 页 显示 的 内 容 -> 


</body> 
<html> <!-- 语法 结束 -> 
可 以 看 到 ， 每 个 标签 都 是 成 对 组 成 的 ， 第 一 个 标签 (如 <html>) 表 示 标 识 的 开始 位 置 ， 而 
第 二 个 标签 (如 </html>) 表 示 标 识 的 结束 位 置 。<html> 标 签 中 包含 <head> 和 <body> 标 签 ， 而 
<head> 和 <body> 标 签 则 是 并 列 排列 的 。 
如 果 把 上 面 的 字符 代码 放置 在 文本 文件 中 ， 然 后 另存 为 testhtml， 就 可 以 在 浏览 器 中 浏 
WT. HA, 由 于 这 个 简单 的 HTML 文档 还 没有 包含 任何 可 显示 的 信息 ， 因 此 在 浏览 器 中 是 
看 不 到 任何 内 容 的 。 


2.1.3 HTML i&7 

















写 HTML 文档 时 ,必须 遵循 HTML 语法 规范 。HTML 文档 实际 上 就 是 一 个 文本 文件 ， 

它 由 标签 和 信息 混合 组 成 ， 当 然 这 些 标签 和 信息 必须 遵循 一 定 的 组 合 规则 ， 和 否则 浏览 器 是 无 
法 解析 的 。 

HTML 语言 的 规范 条 文 不 多 ， 也 很 容易 理解 。 从 逻辑 上 分 析 ， 这 些 标签 包含 的 内 容 就 表 

示 一 类 对 象 ， 也 可 以 称 为 网 页 元 素 。 从 形式 上 分 析 ， 这 些 网 页 元 素 通过 标签 进行 分 了 喇 ， 然 后 

表达 一 定 的 语义 。 很 多 时 候 ， 把 网 页 标签 和 网 页 元 素 混为一谈 ， 而 实际 上 ， 网 页 文档 就 是 
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元 素 和 标签 组 成 的 容器 。 


所 有 标签 都 包含 在 “<” 和 “> ”起止 标 识 符 中 ， 构 成 一 个 标签 ， 如 <style>、<head>、 
<body> 和 <div> 等 。 

在 HTML 文档 中 ， 绝 大 多 数 元 素 都 有 起 始 标签 和 结束 标签 ， 在 起 始 标签 和 结束 标签 
之 间 包 含 的 是 元 素 主体 。 例 如 ，<body> 和 </body> 之 间 包 含 的 就 是 网 页 内 容 的 主体 。 
起 始 标签 包含 元 素 的 名 称 以 及 可 选 属性 ， 也 就 是 说 ， 元 素 的 名 称 和 属性 都 必须 包含 
在 起 始 标 签 中 。 结 束 标签 以 反 斜 杠 开始 ， 然 后 附加 元 素 名 称 。 例 如 : 
<tag> 元 素 主体 </tag> 

元 素 的 属性 包含 属性 名 称 和 属性 值 两 部 分 ， 中 间 通 过 等 号 进行 连接 ， 多 个 属性 之 间 
通过 空格 进行 分 隔 。 属 性 和 元 素 名 称 之 间 也 通过 空格 进行 分 隔 。 例 如 : 

«tag al="vl" a2="v2" a3="v3" .an="vn"> 元 素 主体 </tag> 

少数 元 素 的 属性 也 可 能 不 包含 属性 值 ， 仅 包含 属性 名 称 。 例 如 : 

<tag al a2 a3 .… an> 元 素 主体 </tag> 

一 般 属性 值 应 该 包含 在 引号 内 ， 虽 然 不 加 引号 浏览 器 也 能 解析 ， 但 是 读者 应 该 养 成 
良好 的 习惯 。 

属性 是 可 选 的 ， 元 素 包含 多 少 个 属性 也 是 不 确定 的 ， 这 主要 根据 元 素 而 定 。 不 同 的 
元 素 会 包含 不 同 的 属性 。HTML 为 所 有 元 素 定义 了 公共 属性 ， 如 title, id. class 和 
style 等 。 








虽然 大 部 分 标签 都 成 对 出 现 ， 但 是 也 有 少数 标签 不 是 成 对 出 现 的 ， 这 些 孤 立 的 标签 都 被 
称 为 空 标签 。 空 标签 仅 包 含 起 始 标签 ， 没 有 结束 标签 。 例 如 : 


<tag> 


同样 ， 空 标签 也 可 以 包含 很 多 属性 ， 用 来 标识 特殊 效果 或 功能 ， 例 如 : 


tag al="v1" a2-" v2". an-" v2" 

EIERE, JÉDKOGCRAZS KI. WELA, Af dd E. DIA 
<div><span></div></span> 就 是 不 合法 的 , 而 <div><span></span></div> 或 <span><div> 
</div></span> 是 合法 的 。 

HTML 文档 的 所 有 信息 都 必须 包含 在 <html> 标 签 中 ， 所 有 元 素 的 元 信息 都 应 该 包含 
在 <head> 子 标签 中 , 而 HTML 传递 信息 和 网 页 显示 内 容 则 应 包含 在 <body> 子 标签 中 。 


对 于 HTML 文档 来 说 , 除了 必须 符合 基本 的 语法 规范 外 , 还 必须 保证 文档 结构 信息 的 完 
整 性 。 完 整 的 文档 结构 如 下 : 


<!DOCTYPE html pubHTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 


/strict.dtd"> 


html xmlns="http://wwwwl.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content-"text/html: charset-UTF-8" /> 
<title> 文 档 标题 </title> 
</head> 


<body></body> 
</html> 


HTML 文档 应 主要 包括 如 下 内 容 : 


必须 在 首 行 定义 文档 的 类 型 ， 过 渡 型 文档 可 省 略 。 
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e <htmb> 标 签 应 该 为 文档 名 字 设置 空间 ， 过 渡 型 文档 可 省 略 。 
e 必须 定义 文档 的 字符 编码 ， 一 般 使 用 <meta> 标 签 在 头 部 定义 ， 常 用 字符 编码 包括 中 
文 简体 (gb2312)、 中 文 繁体 (big5) 和 通用 字符 编码 (utf-8)。 
e 应 该 设置 文档 的 标题 ， 可 以 使 用 <title> 标 签 在 头 部 定义 。 
HTML 文档 的 扩展 名 为 html 或 html， 保 存 时 必须 正确 使 用 扩展 名 ， 否 则 浏览 器 无 法 正确 解 
析 。 如 果 要 在 HTML 文档 中 增加 注释 性 文本 ， 可 以 添加 在 “<!--” 和 “->” 标 识 符 之 间 ， 例 如 : 
<!- 单 行 注释 — 


























2.2 XHTML 基础 


XHTML 语言 是 在 HTML 语言 基础 上 发 展 而 来 的 , 但 是 为 了 兼容 数 以 万 计 的 现存 网 页 和 
不 同 浏览 器 ，XHTML 文档 与 HIML 文档 没有 太 大 区 别 ， 只 是 添加 了 XML 语言 的 基本 规范 
和 要 求 。 


2.2.1 XHTML 结构 


下 面 是 Dreamweaver 自动 生成 的 一 个 标准 XHTML 页 面 模板 文件 ， 包 含 以 下 代码 : 
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ 
DTD/xhtmll-transitional.dtd"- 
<html xmins-"http://www.w3.org/1999/xhtml" > 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
</body> 
<html> 


XHTML 代码 不 排斥 HTML 规则 ,在 结构 上 也 基本 相似 , 但 如 果 和 仔细 比较 ， 它 们 有 两 点 
不 同 。 

1. 定义 文档 类 型 

在 XHTML 文档 的 第 一 行 新 增 了 <!IDOCTYPE> 元 素 ， 该 元 素 用 来 定义 文档 类 型 。 
DOCTYPE 是 document type( 文 档 类 型 ) 的 英文 简写 ， 用 于 设置 XHTML 文档 的 版 本 。 使 用 时 
应 注意 该 元 素 的 名 称 和 属性 必须 大 写 。 

DTD( 如 xhtmll-transitional.dtd) 表 示 文 档 类 型 定义 ， 里 面包 含 文档 的 规则 ， 网 页 浏览 器 会 
根据 预定 义 的 DTD 来 解析 页 面 元 素 ， 并 把 这 些 元 素 所 组 织 的 页 面 显示 出 来 。 要 建立 符合 网 
页 标准 的 文档 ，DOCTYPE 声明 是 必 不 可 少 的 关键 组 成 部 分 ， 除 非 所 编写 的 XHTML 确定 了 
一 个 正确 的 DOCTYPE， 和 否则 页 面 内 的 元 素 和 CSS 不 能 正确 生效 。 

2. 声明 命名 空间 

在 XHTML 文档 的 根 元 素 中 必须 使 用 xmlns 属性 声明 文档 的 命名 空间 。xmlns 是 XHTML 
NameSpace 的 英文 缩写 ， 中 文 译 为 命名 空间 。 命 名 空间 是 收集 元 素 类 型 和 属性 名 字 的 一 个 详 
细 DID， 它 允许 通过 一 个 URL 地 址 指向 来 识别 命名 空间 。 
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XHTML 是 HIML 向 XML 过 渡 的 标识 语言 ， 它 需要 符合 XML 规则 ， 因 此 也 需要 定义 
命名 空间 。 又 因为 XHTML 1.0 还 不 允许 用 户 自 定义 元 素 ， 因 此 它 的 命名 空间 都 相同 ， 就 是 
http://www.w3.org/1999/xhtml， 这 也 是 每 个 XHTML 文档 的 xmlns 值 都 相同 的 原因 。 


2.2.2 XHTML 语法 





XHTML 是 根据 XML 语法 简化 而 来 的 ， 因 此 它 遵循 XML 文档 规范 。 同 时 XHTML 又 
大 量 继承 HTML 语言 的 语法 规范 ， 因 此 与 HIML 语言 非常 相似 ， 不 过 它 对 代码 的 要 求 更 加 
严谨 。 遵 循 以 下 这 些 要 求 ， 对 于 培养 良好 的 XHTML 代码 书写 习惯 是 非常 重要 的 : 

e. 在 文档 的 开头 必须 定义 文档 类 型 。 

e 在 根 元 素 中 应 声明 命名 空间 ， 即 设置 xmlns 属性 。 

e 所 有 标签 都 必须 是 闭合 的 。 在 HTML 中 ， 用 户 可 能 习惯 书写 独立 的 标签 ， 如 <p>、 
<l>， 而 不 习惯 写 对 应 的 </p> 和 </l 记 来 关闭 它们 ， 但 在 XHTML 中 这 是 不 合法 的 。 
XHTML 要 求 有 严谨 的 结构 ， 所 有 标签 都 必须 关闭 。 如 果 是 单独 不 成 对 的 标签 ， 应 在 
标签 的 最 后 加 一 个 “/” 来 关闭 它 ， 如 <br/>。 

e 所 有 元 素 和 属性 都 必须 小 写 。 这 与 HTML 不 同 , XHTML 对 大 小 写 是 敏感 的 ，<title> 
和 <TITLE> 表 示 不 同 的 标签 。 

e 所 有 的 属性 必须 用 引号 括 起 来 .在 HIML 中 , 可 以 不 给 属性 值 加 引号 ,但 是 在 XHTML 
中 必须 加 引号 ， 如 <table height="80"></table>。 特 殊 情况 下 ， 可 以 在 属性 值 里 使 用 双 
引号 或 单 引号 。 

e 所 有 标签 都 必须 合理 嵌 套 。 这 是 因为 XHTML 要 求 有 严谨 的 结构 ， 所 以 所 有 的 棋 套 
都 必须 按 顺 序 进行 。 

e 所 有 属性 都 必须 被 赋值 ， 没 有 值 的 属性 就 用 自身 来 赋值 。 例 如 ， 错 误 写 法 : 
<td nowrap> 
正确 写法 : 
<td nowrap="nowrap"> 

所 有 特殊 符号 都 用 编码 表示 , 例如 ,小 于 号 (<) 不 是 元 素 的 一 部 分 , 必须 被 编码 为 “&lt;”; 

大 于 号 C) 也 不 是 元 素 的 一 部 分 ， 必 须 被 编码 为 “&gt ”。 
不 要 在 注释 内 容 中 使 用 “--”， 它 只 能 出 现在 XHTML 注释 的 开头 和 结束 ， 也 就 是 说 ， 在 
内 容 中 它们 不 再 生效 。 例 如 : 























错误 写法 : 

<! 一 注释 一 一 一 注释 -> 
正确 写法 : 

<! 一 注释 注释 -> 


e XHTML 规范 废除 了 name 属性， 而 使 用 id 属性 作为 统一 的 名 称 。 在 正 4.0 及 以 下 版 
本 中 应 保留 name 属性 ， 使 用 时 可 以 同时 使 用 id 和 name 属性 。 


2.2.3 XHTML 类 型 


从 上 面 的 介绍 可 知 ， 一 个 XHTML 文档 有 3 个 主要 部 分 : DOCTYPE、head、body。 
DOCTYPE 是 Document Type 的 英文 简写 ， 表 示 文 档 类 型 。 在 XHTML 文档 中 ， 文 档 类 型 声 
明 总 是 位 于 首 行 ， 例 如 : 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml/DTD/ 


xhtml] -strict.dtd" 
XHTML 文档 类 型 有 3 fb: STRICT( 严 格 类 型 )、TRANSITIONAL( 过 渡 类 型 ) 和 
FRAMESET( 框 架 类 型 )。 上 面 的 为 严格 类 型 ， 另 外 两 种 分 别 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ 


DTD/xhtmll-transitional.dtd"- 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/ TR/xhtml1/ 


DTD/xhtmll-frameset.dtd"> 
这 3 种 文档 类 型 的 区 别 如 下 : 


2.2.4 


严格 型 文档 对 文档 中 的 代码 要 求 比较 严格 ， 不 允许 使 用 任何 表现 层 的 标签 和 属性 。 
在 严格 型 文档 中 , 诸如 center, font, strike, s, u, iframe, isindex, dir, menu, basefont, 
applet 等 元 素 和 align, language, background, bgcolor, border, height, hspace、name、 
noshade, nowrap, target, text, link, vlink, alink, vspace, width 等 属性 将 不 被 支持 。 
过 渡 型 文档 对 标签 和 属性 的 语法 要 求 不 是 很 严格 ， 允 许 在 页 面 中 使 用 HTML 4.01 的 
标签 。 

框架 型 文档 专门 针对 框架 页 面 所 使 用 的 DTD， 当 页 面 中 含有 框架 元 素 时 ， 就 应 该 采 
用 这 种 DTD。 


DTD 解析 


在 XHTML 文档 中 ， 只 有 使 用 正确 的 DOCTYPE( 文 档 类 型 )，HTML 文档 的 结构 和 样式 
才能 被 正常 解析 和 呈现 。 

DTD 是 一 套 关 于 标签 的 语法 规则 。DTD 文件 是 一 个 ASCII 文本 文件 ， 后 级 名 为 .dtd。 利 
用 DOCTYPE 声明 中 的 URL 可 以 访问 指定 类 型 的 DTD 详细 信息 。 例 如 , 在 XHTML 1.0 F, 
过 渡 型 DTD 的 URL 为 http:/wwww3.ore/TR/XHTMLIDTDAxhtmll-transitional.dtd, 该 文档 内 


容 如 下 : 


<l- 
Extensible HTML version 1.0 Transitional DTD 
This is the same as HTMLA Transitional except for 
changes due to the differences between XML and SGML. 
Namespace = http://www.w3.org/1999/xhtml 
For further information, see: http://www.w3.org/ TR/xhtmll 
Copyright (c) 1998-2002 W3C (MIT, INRIA, Keio), 
All Rights Reserved. 
This DTD module is identified by the PUBLIC and SYSTEM identifiers: 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
SYSTEM "http://www.w3.org/ TR/xhtml /DTD/xhtmll-transitional.dtd" 
$Revision: 1.2 $ 
$Date: 2002/08/01 18:37:55 $ 








-> 
<l- Character mnemonic entities > 
«IENTITY % HIMLlatl PUBLIC 


"-//N3C//ENTITIES Latin 1 for XHIML//EN" 
"xhtml-latl.ent"> 
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%HIMLlatl: 
<!ENTITY % HIMLsymbol PUBLIC 
"-/NN3C//ENTITIES Symbols for XHTML//EN" 
"xhtml-symbolLent'> 
%HTMLsymbol; 
<!ENTITY % HTMLspecial PUBLIC 
"-//N3C//ENTITIES Special for XHTML//EN" 
"xhtml-special.ent"- 
*6HTMLspecial; 
Aqu — — ——- mported Names x: 








XIENTITY % ContentType "CDATA"> 
<!-- media type, as per [RFC2045] — 
«IENTITY % ContentTypes "CDAIA"> 


文档 类 型 不 同 ， 对 应 的 DTD 也 不 同 。DTD 文档 包含 元 素 的 定义 规则 ， 元 素 之 间 关 系 的 
定义 规则 ， 元 素 可 使 用 的 属性 、 实 体 或 符号 规则 。 这 些 规 则 用 于 标识 Web 文档 的 内 容 。 此 外 
还 包括 一 些 其 他 规则 ， 它 们 规定 哪些 标签 能 出 现在 其 他 标签 中 。 

如 果 页 面 中 没有 显示 声明 DOCTYPE， 那 么 不 同 的 浏览 器 就 会 自动 采用 各 自 默 认 的 
DOCTYPE 规则 来 解析 文档 中 的 各 种 标签 和 CSS 样式 。 

DOCTYPE 声明 语句 的 结构 含义 如 图 2-1 所 示 。 


文档 类 型 命令 顶级 元 素 可 用 性 HE mR 类 型 标签 。 ”版 本 号 定义 语言 


| 


«IDOCTYPE html. PUBLIC "-WW3CWDTD XHTML 1.0 ee onie 
URL 


| 


"http//www.w3.org/TR/html4/strict.dtd'-- 
图 2-1 DOCTYPE 结构 图 


e ”顶级 元 素 : 指定 DID 中 声明 的 顶级 元 素 的 类 型 , 这 与 声明 的 SGML 文档 类 型 相对 应 。 
HTML 文档 默认 的 顶级 元 素 为 html。 

e 可 用 性 :指定 是 可 公开 访问 的 对 象 PUBLIC 还 是 系统 资源 SYSTEM。 默 认为 PUBLIC， 
SYSTEM 系统 资源 包括 本 地 文件 和 URL. 

e 注册 : 指定 组 织 是 否 由 国际 标准 化 组 织 ISO 注册 。 + 表示 组 织 名 称 已 注册 , 默认 选项 。 
-表示 组 织 名 称 未 注册 。W3C 是 未 注册 ISO 的 组 织 ， 因 此 显示 为 -符号 。 

e 组 织 : 指定 在 DOCTYPE 声明 中 引用 的 DID 的 创建 和 维护 团体 或 组 织 的 名 称 。 
XHTML 语言 规范 的 创建 和 维护 组 织 为 W3C。 

e 类 型 ,指定 公开 文本 的 类 ， 即 引用 的 对 象 类 型 。 

e 标签 :指定 公开 文本 的 描述 ， 即 对 引用 的 公开 文本 的 唯一 描述 性 名 称 ， 后 面 可 附带 
版 本 号 。 

e 定义 : 指定 文档 类 型 的 定义 。 

e 语言 : 指定 公开 文本 的 语言 。 

e URL: 指定 所 引用 对 象 的 位 置 。 

由 此 可 见 ，DOCTYPE 声明 语句 的 写法 严格 遵循 一 定 的 规则 ， 只 有 这 样 ， 浏 览 器 才能 够 
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调用 对 应 的 文档 类 型 的 规则 集 来 解释 文档 中 的 标签 。 
2.2.5 ”命名 空间 


在 XHTML 文档 中 ， 还 有 一 名 常见 的 代码 : 
<html xmlns="http://www.w3.org/1999/xhtml" > 

xmlns 是 XHTML Namespace 的 英文 缩写 ， 中 文 译 为 命名 空间 。 该 属性 声明 html 顶级 元 
素 的 命名 空间 ， 用 来 定义 该 顶级 元 素 及 其 包含 的 各 级 子 元 素 的 唯一 性 。 由 于 XML 语言 允许 
用 户 自 定义 标签 ， 因 此 使 用 命名 空间 可 以 避免 自己 定义 的 标签 和 别人 定义 的 标签 发 生 冲突 。 
比如 ， 如 果 两 个 人 定义 了 一 模 一 样 的 文档 ， 若 文件 头 部 没有 xmlns 命名 空间 加 以 区 分 ， 就 会 
发 生 冲突 ;如 果 在 文档 头 部 加 上 不 同 的 命名 空间 ， 文 档 就 不 会 冲突 。 通 俗 地 讲 ， 命 名 空间 就 
是 给 文档 做 一 个 标签 ， 标 明 该 文档 属于 哪个 网 站 。 对 于 HTML 文档 来 说 ， 由 于 它 的 元 素 是 固 
定 的 ， 不 允许 用 户 进行 定义 ， 因 此 指定 的 命名 空间 永远 是 http://www.wl.org/1999/xhtml。 


2.3 HTML5 基础 








HTMLS fE HTMLA 的 基础 上 进行 了 大 量 修改 ， 下 面 对 HTMLS 的 语法 和 元 素 进行 介绍 。 
2.3.1 HTML5 语法 


1. 内 容 类 型 

HTMLS 的 文件 扩展 名 仍然 是 .html 或 hm， 内 容 类 型 仍然 为 text/html. 

2. 文档 类 型 声明 

HTMLS 的 文档 类 型 声明 为 <IDOCTYPE html>, 按 弃 了 HIML4 中 一 长 串 的 PUBLIC 声明 。 
使 用 这 个 声明 会 触发 浏览 器 以 标准 兼容 模式 显示 页 面 。 网 页 有 多 种 显示 模式 : 怪异 模式 、 近 标 
准 模式 和 标准 模式 。 其 中 标准 模式 也 称 为 非 怪异 模式 。 浏 览 器 会 根据 DOCTYPE 来 识别 应 该 使 
用 哪 种 显示 模式 ， 以 及 使 用 什么 规则 来 验证 页 面 。 

3. 字符 编码 

在 HIML4 中 ， 使 用 <meta> 元 素 指 定 文件 中 的 字符 编码 ， 例 如 : 

<meta http-equiv-"content-type" content-"text/html; charset=UTF-8" /> 
TE HTMLS 中 ， 使 用 charset 属性 来 指定 文件 中 的 字符 编码 ， 例 如 : 
<meta charset="utf-8"> 

目前 这 两 种 方法 都 可 以 使 用 ， 但 是 在 一 个 文档 中 只 能 使 用 一 种 形式 ， 不 能 两 种 形式 混合 
使 用 。 

4. 版 本 兼容 

HTMLS 力图 兼容 旧版 本 的 语法 ， 主 要 体现 在 以 下 几 个 方面 : 

(1) 可 以 省 略 标签 的 元 素 

HIML 元 素 的 标签 分 为 3 种 类 型 : 不 允许 写 结束 标签 、 可 以 省 略 结束 标签 、 开 始 标签 和 
结束 标签 全 部 可 以 省 略 。 不 允许 写 结束 标签 的 元 素 是 指 不 允许 使 用 开始 标签 与 结束 标签 将 元 
素 括 起 来 的 形式 ， 只 允许 使 用 < 元 素 祖 的 形式 进行 书写 ， 例 如 <br>。 可 以 省 略 全 部 标签 的 元 

















。22 。 HTML5+CSS3 网 页 设计 基础 教程 











素 是 指 元 素 可 以 完全 省 略 ， 但 实际 上 ， 元 素 是 隐 式 存在 的 。 
这 几 种 类 型 所 包含 的 标签 如 下 : 
不 允许 写 结束 标签 的 元 素 有 area、base、br、col、command、endbed、hr、img、input、 
keygen. link, meta, param. source, track 和 wbr。 
可 以 省 略 结束 标签 的 元 素 有 J、dt、dd、p、1rt、mp、optgroup、option、colgroup、thead、 
tbody, tfoot, tr, td 和 也 。 
可 以 省 略 全 部 标签 的 元 素 有 html, head, body. colgroup 和 tbody. 
Q) 具有 布尔 值 的 属性 
对 于 具有 布尔 值 的 属性 ， 如 disabled 和 readonly 等 ， 若 只 写 属性 名 ， 表 示 属 性 值 为 true; 
如 果 想 要 将 属性 值 设置 为 lse， 可 以 不 使 用 该 属性 。 例 如 : 
<!-- 只 写 属性 ， 不 写 属性 值 ， 代 表 属性 值 为 tue-> 
«input type="checkbox" checked> 
<!-- 不 写 属性 ， 代 表 属 性 为 false--> 
<input type="checkbox"> 
<l- 属性 值 = 属性 名 ， 代 表 属 性 为 tue -> 
«input type="checkbox" checked="checked"> 
<l- 属性 值 = 空 字符 串 ， 代 表 属性 为 tue — 
input type-"checkbox" checked" 
(3) 省 略 引号 
当 属 性 值 不 包括 空 字符 串 、<、>、=、 单 引号 、 双 引号 等 字符 时 ， 属 性 值 两 边 的 引号 可 
以 省 略 。 例 如 : <input type=text> 是 合法 的 。 


2.3.2 HTML5 元 素 
1E HTMLS 中 引入 的 新 的 标记 元 素 被 分 成 七 大 类 ， 如 表 2-1 所 示 。 
表 2-1 HTML5 新 增 的 标签 类 型 


n 

















标签 类 型 说 明 

[ELS 在 文档 中 添加 其 他 类 型 的 内 容 ， 如 audio. video. canvas 和 iframe 等 

流 在 文档 和 应 用 的 body 中 使 用 的 元 素 ， 如 form, hl 和 small 等 

标题 段落 标题 ， 如 hl 、h2 和 hgroup 等 

交互 与 用 户 交 互 的 内 容 ， 如 音频 和 视频 的 控件 、button 和 textarea 等 

元 数据 通常 出 现在 页 面 的 head 中 ， 设 置 页 面 其 他 部 分 的 表现 和 行为 ， 如 script, style 和 title 等 
短语 文本 和 文本 标记 元 素 ， 如 mark, kbd, sub 和 sup 等 





1. 新 增 的 结构 标记 
HTMLS 定义 了 一 组 新 的 语义 标记 来 描述 元 素 的 内 容 ， 也 就 是 对 过 去 经 常 使 用 的 语义 标 
记 进行 简化 ， 例 如 <div id="header"></div> 被 简化 成 <header>。 这 样 的 元 素 如 表 2-2 所 示 。 


表 2-2 HTML5 新 增 的 结构 标记 


元 素 名 称 说 明 








header | 标记 头 部 区 域 的 内 容 (用 于 整个 页 面 和 页 面 中 的 一 块 区 域 ) 
footer | 标记 脚 部 区 域 的 内 容 (用 于 整个 页 面 或 页 面 中 的 一 块 区 域 ) 





Section Web 页 面 中 的 一 块 区 域 
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( 续 表 ) 

元 素 名 称 说 明 
article 独立 的 文章 内 容 
i 相关 内 容 或 引文 
导航 类 辅助 内 容 









【 例 2-1】 使 用 结构 元 素 设计 一 个 网 页 。 
«IDOCTYPE html> 
<html> 
<head> 
«meta charset="utf-8" > 
«title-HTMLS 结构 元 素 </title> 
<link rel="stylesheet" href}="css/demo01.css"> 
</head> 
<body> 
<header> 
<hl> 网 页 标题 <h1> 
<h2> 次 级 标题 <h2> 
<h4> 提 示 信 息 <h4> 
</header> 
«div id="container"> 
<nav> 
<h3> 导 航 </h3> 
<a hre 伍 "# > 链接 1</a> <a hre£-"2" 5E: 2</a> <a hre£-"4" 5E: 3</a> </nav> 
<section> 
<article> 
<header> 
<h1> 文 章 标题 </hl> 
</header> 
<p> 文 章 内 容 .…..</p> 
<footer> 
</footer> 
</article> 
</section> 
<aside> 
<h3> 相 关内 容 </h3> 
<p> 相 关 辅 助 信息 或 者 服务 …..</p> 
</aside> 
<footer> 
<h2> 页 脚 <h2> 
</footer> 
</div> 
</body> 
</html> 
运行 以 上 代码 ， 效 果 如 图 2-2 所 示 。 


.24* 


HIMLS:CSS3 网 页 设计 基础 教程 














aie 





图 2-2 网 页 效果 


2. 新 增 的 功能 标记 
所 谓 功能 标记 ， 是 指 可 以 用 在 页 面 中 以 完成 某 种 页 面 显示 行为 的 标记 。HTML5 中 新 增 
的 功能 标记 及 说 明 如 表 2-3 所 示 。 


表 2-3_HTML5 新 增 的 功能 标记 

































元 素 名 称 说 明 
hgroup 用 于 对 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 标题 进行 组 合 
figure 表示 一 段 独立 的 流 内 容 , 一 般 表 示 文 档 主体 流 内 容 中 的 一 个 独立 单元 。 使 用 figcaption 
可 以 为 figure 元 素 给 标题 
video 定义 视频 ， 比 如 电影 片段 或 其 他 视频 流 
audio 定义 音频 ， 比 如 音乐 或 其 他 音频 流 
embed 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 MIDI、WAV、AIFF、AU、MP3 等 
mark 用 来 呈现 需要 突出 显示 和 高 党 显示 的 文字 
time 表示 日 期 或 时 间 ， 也 可 以 同时 表示 两 者 
如 图 表 、 图 像 等 。 元 素 本 身 没有 行为， 仅 提供 一 块 画布 ， 把 一 个 绘图 API 
现 给 JavaScript， 以 使 用 脚本 把 内 容 绘制 到 画布 上 
output 下 
source 为 媒介 元 素 (如 video、audio 等 ) 定 义 资源 
menu 菜单 列表 ， 使 用 二 元 素 列举 每 一 个 菜单 项 
ruby ruby 注释 
it 表示 字符 的 解释 或 发 音 
1p 在 ruby 注释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 
wbr 软 换行 。 在 浏览 器 窗口 或 父 级 元 素 的 宽度 足够 时 不 换行 ， 而 宽度 不 够 时 主动 换行 
command 命令 按钮 ， 如 单 选 按钮 、 复 选 框 或 按钮 
details 表示 细节 信息 ， 可 以 和 summary 元 素 配合 使 用 
datalist 表示 可 选 数据 列表 ， 和 input 元 素 配合 使 用 ， 可 以 制作 输入 值 的 下 拉 列表 
datagrid 表示 可 选 数据 列表 ， 以 树 型 列表 的 形式 显示 
keygen 密 钥 
progress 表示 运行 中 的 进程 
email 输入 e-mail 地 址 的 文本 输入 框 
ud 表示 必须 输入 URL 地 址 的 文本 输入 框 





第 2 章 HTML. XHTML. HTMLS 25» 


GK) 










表示 必须 输入 数值 地 址 的 文本 输入 框 
示 必 须 输入 一 定 范围 数值 的 文本 输入 框 
选取 日 期 和 时 间 的 新 型 输入 文本 框 








Date Pickers 





3. 废除 的 元 素 
HIML5 中 废除 了 HTMLA 中 的 一 些 元 素 ， 主 要 包括 : 能 用 CSS 替代 的 元 素 、 不 再 使 / 











frame 框架 、 只 有 部 分 浏览 器 支持 的 元 素 。 

(1) 能 用 CSS 替代 的 元 素 

HTMIA 中 的 一 些 表 现 文本 效果 的 元 素 ， 如 basefont, big. center. font. s. strike, tt fi 
u 这 些 元 素 ，HTMLS5 将 它们 放 在 了 CSS 样式 表 中 ， 因 此 将 这 些 元 素 废除 了 。 其 中 ，font 元 
素 人 允许 由 “所 见 即 所 得 ”的 编辑 器 插入 ，s、strike 元 素 可 以 由 del 元 素 替 代 ，tt 元 素 可 以 FE 
CSS 的 font-family 属性 替代 。 

(2) 不 再 使 用 frame 框架 

对 于 frameset、frame、noframes 元 素 ， 由 于 frame 框架 对 网 页 可 用 性 存在 负面 影响 ， 因 
JE HTMLS 不 再 支持 frame， 只 支持 frame。 

(3) 只 有 部 分 浏览 器 支持 的 元 素 

对 于 只 有 部 分 浏览 器 支持 的 元 素 ， 如 applet、bgsound、blink 和 marquee， 只 被 IE 所 支 
持 ， 因 此 HTMLS 将 它们 废除 。 其 他 被 废除 的 元 素 还 有 : 

e 使 用 ruby 元 素 替代 rb 元 素 。 

e 使 用 abbr 元 素 替代 acronym 元 素 。 

e {EH ul ERË dir 元 素 。 
e ”使 用 form 元 素 与 input 元 素 相 结合 的 方式 替代 isindex 元 素 。 
e 使 用 pre 元 素 奉 代 listing 元 素 。 
. 
. 
. 


























使 用 code G3& EH xmp 元 素 。 
使 用 GUIDS 替代 nextid 元 素 。 
使 用 text/plain 的 MIME 类 型 奉 代 plaintext 元 素 。 





24 新 增 和 废除 的 属性 


HIML5 除了 新 增 和 废除 一 些 元 素 标 记 外 ， 还 新 增 和 废除 了 过 去 HIML4 中 的 一 些 元 素 


24.1 新 增 的 属性 


HTMLS 新 增 的 属性 主要 体现 为 表单 属性 、 链 接 属性 以 及 其 他 属性 。 
1. 增加 的 表单 属性 
HTMLS 新 增 的 表单 属性 及 功能 如 表 2-4 所 示 。 
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表 2-4_HTML5 新 增 的 表单 属性 

















属性 名 称 说 明 

um input, select, textarea 和 button 元 素 拥 有 ， 以 指定 属性 的 方式 让 元 素 在 画面 打 
开 时 自动 获得 焦点 

placeholder input, textarea 元 素 拥 有 ， 提 示 用 户 可 以 输入 的 内 容 

和 input, output, select, textarea, button 与 fieldset 元 素 拥有 ， 声明 这 些 控件 属 
于 哪个 表单 ， 然 后 放置 在 页 面 上 的 任何 位 置 而 不 是 表单 之 内 

required 表示 必 填 项 

autocomplete, min, max, | ”为 input 元 素 新 增 的 属性 。datalist 元 素 和 autocomplete 属性 配合 使 用 。multiple 

multiple, pattem, step | 允许 在 上 传 文件 时 一 次 上 传 多 个 文件 

formaction 

formenctype "n mn Dá ; a 

ERU input 和 button 元 素 拥 有 , 重 载 form 元 素 的 action, enctype, method, novalidate、 

: target 属性 

formnovalidate 

formtarget 

novalidate 取消 提交 时 进行 的 有 关 检查 ， 表 单 可 以 被 无 条 件 提交 





2. 增加 的 链接 属性 
HTMLS 新 增 的 链接 属性 及 功能 如 表 2-5 所 示 。 


表 2-5_HTML5 新 增 的 链接 属性 





属性 名 称 说 明 
规定 目标 URL 是 为 哪 种 类 型 的 媒介 和 设备 进行 优化 的 ， 只 能 在 href 属性 存在 时 
ede 使 用 
hreflang Sais x ” Mm 
d 为 area 元 素 增加 的 属性 ， 以 保持 和 a, link 元 素 保持 一 致 
sizes 为 link 元 素 增加 的 属性 ， 可 以 和 icon 元 素 结合 使 用 ， 指 定 关联 图 标的 大 小 
target 为 base 元 素 增加 的 属性 ， 目 的 是 和 a 元 素 保持 一 致 


3. 增加 的 其 他 属性 
除了 以 上 介绍 的 属性 外 ，HTMLS5 还 增加 了 一 些 其 他 属性 ， 如 表 2-6 所 示 。 


表 2-6 HTML5 新 增 的 其 他 属性 




















属性 名 称 说 明 

reversed 为 ol 元 素 增加 的 属性 ， 用 于 指定 列表 倒序 显示 

charset 为 meta 元 素 增加 的 属性 

type 为 menu 元 素 增加 的 属性 ，label 属性 为 菜单 定义 可 见 的 标注 ，type 属性 让 菜单 

label 能 以 上 下 文 菜单 、 工 具 条 和 列表 菜单 的 形式 出 现 

scoped 为 style 元 素 增加 的 属性 ， 规 定 样 式 的 作用 范围 

async 为 script 元 素 增加 的 属性 ， 定 义 脚本 是 否 异 步 执行 

m 为 html 元 素 增加 的 属性 ， 开 发 离线 Web 应 用 程序 时 ， 与 API 结合 使 用 ， 定 义 
一 个 URL， 在 这 个 URL 上 描述 文档 的 缓存 信息 

ea J iframe 元 素 增加 的 属性 ， 用 来 提高 页 面 安 全 性 ， 防 止 不 信任 的 Web 页 面 执 


行 某 些 操作 





srcdoc 
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2.4.2 ”废除 的 属性 





HTML. XHTML. HIML5 


s。27。 





HTMLS 废除 了 HTMLA 中 过 时 的 属性 , 而 采用 其 他 属性 或 方案 进行 蔡 代 , 如 表 2-7 所 示 。 


表 2-7 HTML5 中 废除 的 属性 
































HTML4 属性 HTML5 替代 方案 
rev rel 
charset 在 被 链接 的 资源 中 使 用 HTTP content-type 头 元 素 
shape. coords 使 用 area 元 素 代 替 a 元 素 
longdesc 使 用 a 元 素 链 接 到 较 长 描述 
target 多 余 属 性 ， 被 省 略 
nohref 多 余 属 性 ， 被 省 略 
profile 多 余 属 性 ， 被 省 略 
Version 多 余 属 性 ， 被 省 略 
name id 
scheme 只 为 某 个 表单 域 使 用 scheme 





archive, classid, codebase, 
codetype, declare, standby 


valuetype, type 
axis, abbr 
scope 
caption, input, 
aligá legend, div. hl. 


h2, h3, h4, h5. 





alink, link, text, vlink, 
background, bgcolor 

align, bgcolor, border, 
cellpadding、cellspacing、 
frame, rules, width 

align, char, charoff, height, 





使 用 data 与 type 属性 类 调用 插件 。 需要 使 用 这 些 属 
性 来 设置 参数 时 ， 使 用 param 属性 

使 用 name 和 value 属性 ， 不 声明 值 的 MIME 类 型 
使 用 以 明确 、 简 洁 的 文字 开头 ， 后 跟 详 述 文 字 的 形 
式 。 可 以 对 更 详细 的 内 容 使 用 title 属性 ， 1 元 
格 的 内 容 变 得 简短 

在 被 链接 的 资源 中 使 用 HITP content-type 头 元 素 











使 用 CSS 样式 表 替 代 


使 用 CSS 样式 表 替 代 


使 用 CSS FERK EMR 





h6, 

tbody. thead, tfoot 
td, th 

tr 






































$ 使 用 CSS 样式 表 蔡 代 
nowrap. valign 
align, bgcolor, char, charoff, * steak ih 
EE EANES BEDAN 使 用 CSS FERRER 
align, char. charoff, valign 使 用 CSS FERRE 
clar, Cares valign, col. colgroup 使 用 CSS 样式 表 替 代 
align, border, hspace. vspace | | object 使 用 CSS 样式 表 替 代 
clear br 使 用 CSS 样式 表 替 代 
compact、type ol, ul, li 使 用 CSS 样式 表 替 代 
compact dl, menu 使 用 CSS 样式 表 替 代 
width pre 使 用 CSS 样式 表 替 代 
align、noshade、size、width hr 使 用 CSS 样式 表 替 代 
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EK) 
HTMLA 属性 HTML5 蔡 代 方案 
align, frameborder, scrolling, — 
i nt 使 用 CSS 样式 表 替 代 
align, hspace. vspace 使 用 CSS FEGXGERHX 


autosubmit 





2.5 全 局 属性 


在 HIML5 中 ， 增 加 了 全 局 属性 的 概念 ， 即 可 以 对 任何 元 素 都 使 用 的 属性 。 这 些 属 性 如 
表 2-8 所 示 。 


表 2-8 HTML5 中 新 增 的 全 局 属性 


属性 名 说 明 
contentEditable 允许 用 户 在 线 编辑 元 素 中 的 内 容 
dediguMode 指定 整个 页 面 是 否 可 编辑 ， 当 页 面 可 编辑 时 ， 页 面 中 任何 支持 


contentEditable 属性 的 元 素 





变 成 可 编辑 状态 






hidden 通知 浏览 器 不 泻 染 该 元 素 ， 使 得 该 元 素 不 可 见 
spellcheck 对 用 户 输入 的 文本 内 容 进行 拼写 检查 和 语法 检查 


当 不 断 按 Tb 键 让 窗口 或 页面 中 的 控 人 获得 
属性 表示 该 控件 第 儿 个 被 访问 到 





时 , 每 一 个 控件 的 : 
tabindex 时 , 每 一 个 控件 的 tabindex 





下 面 将 对 这 些 全 局 属性 进行 详细 介绍 。 
2.5.1  contentEditable 属性 


contentEditable 属性 的 主要 功能 是 允许 用 户 在 线 编辑 元 素 中 的 内 容 。contentEditable 是 
-个 布尔 值 属性 , 可 以 被 指定 为 true 或 false。 此 外 , 该 属性 还 可 能 处 于 隐藏 的 inherit 状态 。 

contentEditable 属性 值 为 true 时 ， 元 素 被 指定 为 允许 编辑 ， 属 性 值 为 false 时 ， 元 素 被 指定 
为 不 可 编辑 ， 未 指定 true 和 false 时 ， 由 inherit 状态 决定 ， 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 
则 该 元 素 就 是 可 编辑 的 。 

【 例 2-2】 为 列表 元 素 添 加 contentEditable 属性 ， 使 得 该 元 素 变 成 可 编辑 状态 。 

<head> 
«meta charset="UTF-8"> 


<title>contentEditable 属性 </title> 
</head> 


<h1> 可 编辑 列表 </h1> 
<ul contenteditable="true"> 
<> 1</li> 
<li> 2</li> 
<li> 3</li> 
«ful 
运行 以 上 程序 ， 结 果 如 图 2-3 所 示 。 








图 2-3 可 编辑 列表 


在 编辑 完 元 素 中 的 内 容 后 ， 如 果 想 要 保存 这 些 内 容 ， 只 能 把 元 素 的 innerHTML 发 送 到 
服务 器 端 进行 保存 。 因 为 改变 元 素 的 内 容 后 ,元 素 的 innerHTML 内 容 也 随 之 改变 ， 目 前 还 没 
有 特别 的 API 能 用 来 保存 编辑 后 元 素 的 内 容 。 


2.5.2 designMode 属性 


designMode 属性 用 来 指定 整个 页 面 是 否 可 编辑 ， 当 页 面 可 编辑 时 ， 页 面 中 任何 支持 
contentEditable 属性 的 元 素 都 变 成 可 编辑 状态 。designMode 属性 只 能 在 JavaScript 脚本 中 编辑 
和 修改 。 该 属性 有 两 个 值 : on 和 off。 属 性 值 被 指定 为 on 时 ， 页 面 可 编辑 ;被 指定 为 of 时 ， 
页 面 不 可 编辑 。 使 用 JavaScript 脚本 指定 designMode 属性 的 示例 如 下 : 
document.designMode="on" 
针对 designMode 属性 ， 各 浏览 器 的 支持 情况 也 不 相同 ， 因 此 ， 在 使 用 过 程 中 要 注意 测试 。 
2.5.3 hidden 属性 


TEHTMLS 中 ,所 有 元 素 都 允许 使 用 hidden 属性 ,hidden 属性 类 似 于 input 元 素 中 的 hidden 
元 素 ， 功 能 是 通知 浏览 器 是 否 泻 染 该 元 素 。 但 是 元 素 中 的 内 容 仍 由 浏览 器 创建 。 也 就 是 说 ， 
页 面 装载 后 ， 人 允许 使 用 JavaScript 脚本 把 hidden 属性 取消 ， 取 消 后 该 元 素 变 为 可 见 状 态 ， 同 
时 元 素 中 的 内 容 也 显示 出 来 。hidden 是 一 个 布尔 值 属性 ， 当 设 为 tue 时 ， 元 素 处 于 不 可 见 状 
S: MKH false 时 ， 元 素 处 于 可 见 状态 。 


2.54 spellcheck 属性 





spellcheck 属性 是 HTMLS 针对 input(type-text)£il textarea 元 素 提供 的 一 个 拼写 和 语法 检查 
属性 。 该 属性 取 值 tue 或 false， 书 写 时 需要 注意 ， 必 须 明 确 声明 属性 值 为 tue 或 false. 
需要 注意 的 是 ， 如 果 元 素 的 readonly 或 disabled 属性 设 为 tue， 则 不 执行 拼写 检查 。 


2.5.5 tabindex 属性 


tabindex 是 开发 中 的 一 个 念 ， 当 不 断 按 Tab 键 让 窗口 或 页 面 中 的 控件 获得 焦点 ， 并 对 
窗口 或 页 面 中 的 所 有 控件 进行 遍历 时 ， 每 一 个 控件 的 tabindex 属性 表示 该 控件 第 几 个 被 访问 到 。 


2.6 新 增 的 事件 


HTMLS5 中 对 页 面 、 表 单 、 键 盘 元 素 新 增 了 许多 事件 ， 如 表 2-9 所 示 。 
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R2-9 HTML5 中 对 页 面 、 表 单 、 键 盘 元 素 新 增 的 各 种 事件 











元 素 对 象 事件 触发 时 机 
beforeprint 即将 开始 打印 之 前 触发 
afterprint 打印 结束 后 触发 
Tesize 浏览 器 窗口 大 小 发 生 改 变 时 触发 
error 页 面 加 载 出 错时 触发 
offline 页 面 变 为 离线 状态 时 触发 
window 对 象 online 页 面 变 为 在 线 状态 时 触发 
body 对 象 页 面 加 载 时 触发 ， 类 似 于 load 事件 ， 区 别 在 于 load 事件 在 页 面 第 
pageshow 一 次 加 载 时 触发 ， 而 pageshow 事件 在 每 一 次 加 载 时 触发 ， 即 从 网 


页 缓存 中 读 取 页 面 时 只 触发 pageshow 事件 ， 不 触发 load 事件 
当前 页 面 被 关闭 时 触发 , 该 事件 通知 浏览 器 显示 一 个 用 于 询问 用 户 














beforeunload | 是 否 确实 离开 本 页 面 的 确认 窗口, 可 以 设置 确认 窗口 中 的 提示 文字 
hashchange — | 页 而 URL 地 址 字符 串 中 的 哈 希 部 分 发 生 改变 时 但 发 
任何 元 素 mouwewhed | 当 鼠 标 指针 县 停 在 元 素 上 并 深 动 鼠标 深 轮 时 估 改 
任何 容器 元 素 | scroll 当 元 素 深 动 条 被 深 动 时 他 发 
ce SHIP EUOOIR ERIT. pur 事件 与 change 事件 的 区 
eaa | inpar BU. input 事件 在 元 素 沿 未 失去 焦点 时 已 角 发 ，shange 事件 只 在 
元 素 失 去 焦点 时 触发 
ca zo 当 用 户 按 下 表单 元 素 中 type 类 型 为 Teset 的 input 元 素 ， 或 者 在 





JavaScript 脚本 代码 中 执行 表单 对 象 的 reset 方法 时 触发 
27 本 章 小 结 


本 章 从 语法 上 对 HTML. XHTML. HTMLS 进行 了 深入 介绍 ， 从 而 方便 读者 对 HIML 
语言 体系 的 语法 有 一 个 深入 的 了 解 。 本 章 首先 介绍 了 HTML 语言 的 基础 知识 , 分 别 从 HIML 
语言 本 身 及 其 结构 和 语法 进行 介绍 ; 然后 介绍 了 HTML. 和 XML 发 生 碰撞 结合 的 产物 一 一 
XHTML 的 结构 、 语 法 、 类 型 、DTD 和 命名 空间 等 内 容 ， 最 后 详细 介绍 了 HTMLS 的 语法 ， 
HTMLS 新 增 和 废除 的 属性 ，HTMLS5 新 增 的 全 局 属性 和 事件 等 内 容 。 通 过 本 章 的 学 习 ， 和 希望 
读者 能 熟悉 HTML 语言 的 语法 结构 ， 能 够 熟练 写 出 一 份 完整 的 HTMLS5 文档 。 


2.8 思考 和 练习 


. 简 述 HTML 的 语法 。 

. 简 述 XHTML 的 语法 。 

. 简 述 HTMLS 的 语法 。 

. 简 述 HTMLS 新 增 和 废除 的 属性 。 

. HTMLS 新 增 了 哪些 全 局 属性 和 事件 ? 


a 上 PP 一 


为 了 增强 Web 的 实用 性 , HTMLS 引入 了 许多 新 技术 , 对 传统 HTML 文档 进行 了 大 幅 修 
改 ， 使 得 文档 结构 更 加 清晰 明了 、 易 读 ， 降 低 了 学 习 难 度 ， 这 样 既 方便 浏览 者 访问 ， 也 提高 
了 Web 开发 的 速度 。 本 章 将 详细 介绍 HTMLS 中 新 增 的 主体 元 素 、 语 义 元 素 ， 并 通过 这 两 大 
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类 元 素 设计 一 个 综合 性 强 的 网 页 。 
本 章 学 习 目 标 : 


为 了 帮助 读者 更 好 地 对 HTMLS 网 页 有 一 个 简单 的 理解 与 认识 ， 下 面 给 出 HTMLS 文档 


熟悉 HIMLS 文档 结构 ， 并 能 用 记事 本 直接 创建 一 个 HTMLS5 文档 
元 素 


掌握 HTMLS5 新 增 的 主体 元 素 ， 诸 如 article, section, nav, aside, pubdate 等 
掌握 HIMLS 新 增 的 语义 元 素 ， 诸 如 header. hgroup. footer. address 等 


31 认识 HTML5 文档 结构 


的 结构 代码 ， 并 进行 详细 注释 。 


<!DOCTYPE html> 

<!-- 声明 文档 结构 类 型 -> 

<html lang="zh-cn"> 

<- 声明 文档 语言 区 域 ~> 

<head> 

<I 文档 的 头 部 区 域 一 

«meta charset="UTF-8"> 

<l- 文档 头 部 区 域 中 元 数据 区 的 字符 集 定义 ，utf8 表示 国际 通用 的 字符 集 编码 格式 -> 
<title> 文 档 标 题 </title> 

<!-- 文档 头 部 的 标题 。title 内 容 对 于 SEO 来 说 极为 重要 -> 

«meta name-"description" conten 人 "文档 描述 信息 "> 

<!-- 文档 头 部 区 域 的 元 数据 区 关于 文档 描述 的 定义 -> 

<meta name-"author" contenf=" 文 档 作 者 "> 

<!-- 文档 头 部 区 域 的 元 数据 区 关于 开发 人 员 姓 名 的 定义 -> 

«meta name-"copyright" content=" 版 权 信 息 "> 

<I- 文档 头 部 区 域 的 元 数据 区 关于 版 权 的 定义 --> 

<link rel-"shortcut icon" href}="favicon.ico"> 

<!- 文档 头 部 区 域 的 兼容 性 写法 -> 

<link rel="apple-touch-icon" href-"custom ico.png" 

<l 文档 头 部 区 域 的 apple 设备 图 标的 引用 -> 

«meta name-"viewport" content—"width=device-width.user-scalable=no"> 
<!- 文档 头 部 区 域 对 于 不 同 接口 设备 的 特殊 声明 。 宽 -设备 宽 ， 用 户 不 能 自行 缩放 -> 





了 解 HIML5 元 素 的 分 类 ,包括 结构 性 元 素 、 级 块 性 元 素 、 行内 语义 性 元 素 和 交互 性 
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<link rel="stylesheet" hre 合 "main css"> 
<I- 文档 头 部 区 域 的 样式 引用 -> 
script src-"'script js" —/script- 
<I 文档 头 部 区 域 的 JavaScript 脚本 文件 调用 -> 
</head> 
<body> 
<header>HTMLS5 文档 的 头 部 区 域 </header> 
<nav>HTML5 文档 的 导航 区 域 </nav> 
«sectionHTMLS 文档 的 主要 内 容 区 域 
<aside>HTMLS5 文档 的 主要 内 容 区 域 的 侧 边 导航 或 菜单 区 </aside> 
-article-HTMLS 文档 的 主要 内 容 区 域 的 内 容 区 
<section> 以 下 是 section 和 article IK 
<aside></aside> 
<article> 
<header> 
HTMLS 文档 的 嵌 套 区 域 ， 可 以 对 某 个 article 区 域 进行 头 部 和 脚 部 的 
定义 ， 这 样 做 可 以 有 非常 清晰 和 严谨 的 文档 目录 结构 关系 


</header> 
<footer></footer> 
</article> 
</section> 
</article> 
</section> 
«footer-HTMLS 文档 的 脚 部 区 域 </footer> 
</body> 
</html> 
事实 上 ， 对 于 最 简单 的 HIML5 S, NARA ATRE: 
<!DOCTYPE html> 


HTMLS 文档 以 <!IDOCTYPE> 开 头 ， 这 是 文档 类 型 声明 ， 并 且 必须 位 于 HTMLS 文档 的 
- 行 ， 用 来 告诉 浏览 器 或 任何 其 他 分 析 程 序 它们 所 查看 的 文档 类 型 。 
html 标签 是 HTMLS 文档 的 根 标签 ， 紧 跟 在 <IDOCTYPE html> 下 面 。html 标签 支持 





HTMLS 全 局 属性 和 manifest 属性 。manifest 属性 主要 在 创建 HTMLS 离线 应 用 的 时 候 用 到 。 


head 标签 是 所 有 头 部 元 素 的 容器 。 位 于 <head> 内 部 的 元 素 可 以 包含 脚本 、 样 式 表 、 元 信 


息 等 。head 标签 支持 HTMLS 全 局 属性 。 


meta 标签 位 于 文档 的 头 部 , 不 包含 任何 内 容 。meta 标签 的 属性 定义 了 与 文档 相关 联 的 名 


称 / 值 对 。 该 标签 提供 页 面 的 元 信息 ， 如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 


«meta charset="UTF-8"> 定 义 了 文档 的 字符 编码 是 utE8。 这 里 ，charset 是 meta 标签 的 属 





性 ， 而 utf8 是 该 属性 的 值 。HTMLS5 中 的 很 多 标签 都 有 属性 ， 从 而 扩展 标签 的 功能 。 


title 标签 位 于 <head> 标 签 内 ， 定 义 了 文档 的 标题 。title 标签 定义 浏览 器 工具 栏 中 的 标题 、 


提供 页 面 被 添加 到 收藏 夹 时 的 标题 以 及 显示 在 搜索 引擎 结果 中 的 页 面 标题 。 所 以 title 标签 非 
常 重要 ， 在 写 HTMLS 文档 的 时 候 一 定 要 记得 写 这 个 标签 。title 标签 支持 HIML5 全 局 属性 。 


body 标签 中 。 


body 标签 定义 文档 的 主题 和 所 有 内 容 ， 如 文本 、 超 链接 、 图 像 、 表 格 和 列表 等 都 包含 在 
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32 HTMLS5 元 素 分 类 


HTMLS 新 增 了 27 个 元 素 ， 废 弃 了 16 个 元 素 。 根 据 现 有 的 标准 规范 ， 下 面 把 HTMLS 
元 素 分 为 结构 性 元 素 、 级 块 性 元 素 、 行 内 语义 性 元 素 和 交互 性 元 素 4 大 类 。 

1. 结构 性 元 素 

结构 性 元 素 主 要 负责 Web 上 下 文 结构 的 定义 ， 确 保 HTML 文档 的 完整 性 ， 这 类 元 素 如 
表 3-1 所 示 。 


表 3-1 结构 性 元 素 
元 素 描述 
section | 在 Web 页 面 应 用 中 ，section 元 素 也 可 以 用 于 区 域 的 章节 表述 
页 面 主体 的 头 部 ， 注 意 与 head 元 素 相 区 别 。head 元 素 不 可 见 ， 而 header 往往 包含 在 











header body 中 

页 面 的 底部 ， 即 页 脚 。 通 常用 于 标 出 网 站 的 一 些 相关 信息 ， 例 如 “关于 我 们 ” 法 律 声 
明 、 邮 件 信息 和 管理 入 口 等 

nav 专门 用 于 菜单 导航 、 链 接 导航 的 元 素 ， 是 navigator 的 缩写 

article 用 于 表示 一 篇 文章 的 主题 内 容 ， 一 般 为 文字 集中 显示 的 区 域 


2. 级 块 性 元 素 
级 块 性 元 素 主要 用 于 Web 页 面 区 域 的 划分 , 确保 内 容 得 到 有 效 分 隔 , 这 类 元 素 如 表 3-2 所 示 。 


表 3-2_ 级 块 性 元 素 








元 素 描述 
aside 用 来 表示 注 记 、 贴 士 、 侧 栏 、 摘 要 、 插 入 的 引用 等 ， 作 为 补充 主体 的 内 容 。 从 简单 页 
面 的 显示 上 看 ， 就 是 侧 边 栏 ， 可 以 在 左边 ， 也 可 以 在 右边 
figure 是 对 多 个 元 素 进行 组 合并 展示 的 元 素 ， 通 常 和 figcaption 配合 使 用 
code 表示 一 段 代码 块 
diülog 用 来 表示 人 与 人 之 间 的 对 话 。dialog 元 素 还 包括 dt 和 dd 这 两 个 组 合 元 素 , 它们 常常 同 





时 使 用 。dt 用 来 表示 说 话 者 ，dd 表示 说 话 内 容 


3. 行内 语义 性 元 素 
行内 语义 性 元 素 主要 完成 对 Web 页 面具 体内 容 的 引用 和 表述 ， 是 丰富 内 容 展示 的 基础 ， 
这 类 元 素 如 表 3-3 所 示 。 
表 3-3 行内 语义 性 元 素 
元 素 描述 
meter 表示 特定 范围 内 的 数值 ， 可 用 于 工资 、 数 量 、 百 分 比 等 
time 表示 时 间 值 
用 来 表示 进度 条 ， 可 通过 对 其 max、min、step 等 属性 进行 控制 ， 完 成 对 进度 的 表示 和 
progress 监视 
视频 元 素 ， 用 于 支持 和 实现 视频 文件 的 直接 播放 ， 支 持 缓冲 预 加 载 和 多 种 视频 媒体 格 














veo XX, "ll MPEG-4. OggV 和 WebMail 等 
" 音频 元 素 ， 用 于 支持 和 实现 音频 (音频 流 ) 文 件 的 直接 播放 ， 支 持 缓冲 预 加 载 和 多 种 音 





频 媒 体格 式 
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4. 交互 性 元 素 
交互 性 元 素 主要 用 于 功能 性 的 内 容 表达 ， 会 有 一 定 的 内 容 和 数据 的 关联 ， 是 各 种 事件 的 
基础 ， 这 类 元 素 如 表 3-4 所 示 。 














元 素 
details 表示 一 段 具体 的 内 容 ， 内 容 默 认可 能 不 显示 ， 需 要 通过 某 种 手段 (如 单 击 与 legend 交 
互 ) 才 会 显示 出 来 
datagrid 用 来 控制 客户 端 数据 与 显示 ， 可 以 由 动态 脚本 及 时 更 新 
menu 主要 用 于 交互 菜单 
command 用 来 处 理 命令 按钮 


33 构建 主体 内 容 


在 HIML5 中 ， 为 了 使 文档 的 结构 更 加 清晰 、 明 确 ， 追 加 了 几 个 与 页 局 、 页 脚 、 内 容 区 
块 等 文档 结构 相关 联 的 结构 元 素 。 需要 说 明 的 是 ,本 节 所 讲 的 内 容 区 块 是 指 将 HTML 页 面 按 
逻辑 进行 分 割 后 的 单位 。 例 如 ， 对 于 书籍 来 说 ， 章 、 节 都 可 以 称 为 内 容 区 块 ， 对 于 博客 网 站 
来 说 ， 导 航 菜单 、 文 章 正文 、 文 章 的 评论 等 每 一 部 分 都 可 称 为 内 容 区 块 。 

本 节 主 要 讲解 HTMLS 在 页 面 的 主体 结构 方面 新 增 的 结构 元 素 。 


3.3.1 标识 文章 : article 元 素 


<article> 标签 是 HIMLS 新 增 的 元 素 。article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 
完整 的 、 可 以 独自 被 外 部 引用 的 内 容 。 它 可 以 是 论坛 帖子 、 报 纸 文章 、 博 客 条 目 、 用 户 评论 
或 独立 的 插件 ， 或 是 其 他 任何 独立 的 内 容 。 
除了 内 容 部 分 ，article 元 素 通 常 有 自己 的 标题 (一 般 放 在 header 元 素 里 面 )， 有 时 还 有 脚 
注 。 下 面 以 一 篇 博客 文章 为 例 来 介绍 article 元 素 的 使 用 。 
【 例 3-1】 article 元 素 使 用 示例 。 
<article> 
<header> 
<hl> 苹 果 <hl> 
<p> 发 表 日 期 : <time pubdate="pubdate">2017/05/01</time></p> 
[header 
<p><b> 苹 果 </b>， 植 物 类 水 果 ， 多 次 花 果 .…..(" 苹 果 " 文 章 正文 )</p> 
<footer> 
<p><small> 著 作 权 归 *** 公 司 所 有 。</small></p> 
</footer> 
article 


这 个 示例 是 一 篇 描述 苹果 的 博客 文章 ， 由 于 文章 具有 独立 性 ， 因 此 用 article 元 素来 组 织 。 
在 article 元 素 中 ， 使 用 header 元 素来 显示 文章 的 标题 ， 其 中 用 hl 标签 罗列 标题 ， 然 后 用 p 元 
素 显示 发 表 日 期 。 标 题 header 的 下 方 是 用 p 元 素 组 织 的 文章 的 大 量 内 容 。 文 章 的 末尾 是 用 footer 
元 素 嵌 入 文章 的 脚注 。 从 这 个 示例 来 看 ，article 元 素 主要 用 于 表示 逻辑 上 相对 独立 、 完 整 的 内 容 。 

article 元 素 也 可 以 嵌 套 使 用 。 在 嵌 套 使 用 时 ， 内 层 的 内 容 原则 上 需要 与 外 层 的 内 容 有 关 
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系 ， 即 联系 比较 紧密 ， 垦 套 的 内 外 层 描述 的 均 是 独立 的 事物 。 例 如 ， 一 篇 博客 文章 的 评论 ， 
就 可 以 使 用 拒 套 article 元 素 的 方式 表示 。 
【 例 3-2】 通过 嵌 套 article 元 素来 为 博客 添加 评论 内 容 。 
<article> 
<header> 
<h1>article 元 素 使 用 方法 <hl> 
<p> 发 表 日 期 : <time pubdate="pubdate">2017/05/10</time></p> 
</header> 
<p> 此 标签 里 显示 的 是 article 整个 文章 的 主要 内 容 ， 下 面 的 section 元 素 里 是 对 该 文章 的 评论 <p> 
«section 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 发 表 者 : maizi</h3> 
<p><time pubdate datetime="2016-6-14">1 小 时 前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 项 一 下 ! </p> 
</article> 
<article> 
<header> 
<h3> 发 表 者 : 小 妮 </h3> 
<p><time pubdate datetime-"2017-6-14T:21-26:00"1 小 时 前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 对 article 的 解释 很 详细 </p> 
</article> 
</section> 
</article> 
这 个 示例 相 比 上 一 个 示例 的 内 容 更 加 完整 , 添加 了 读者 的 评论 内 容 , 整体 内 容 比较 独立 、 
完整 , 因此 对 其 使 用 article 元 素 。 这 里 把 文章 标题 放 在 header 元 素 中 , 把 文章 正文 放 在 header 
元 素 后 面 的 p 元 素 中 ， 然 后 用 section 元 素 对 正文 与 评论 部 分 进行 区 分 (下 一 节 介绍 section 元 
素 ， 它 是 一 个 分 块 元 素 ， 用 来 对 页 面 中 的 内 容 进行 分 块 )。 在 section 元 素 中 嵌入 评论 内 容 ， 
评论 中 每 个 人 的 评论 又 是 比较 独立 、 完 整 的 内 容 ， 因 此 每 一 条 评论 使 用 一 个 article 元 素来 组 
织 。 在 评论 的 article 元 素 中 ， 又 可 以 包括 评论 标题 与 评论 内 容 ， 分 别 放 在 header 元 素 和 p 元 
素 中 (示例 中 的 time 元 素 和 pubdate 属性 ， 将 在 本 章 结尾 处 介绍 )。 
另外 ，article 元 素 还 能 用 来 表示 插件 。 下 面 是 一 段 允 许 全 屏 显示 的 代码 ， 作 用 就 是 让 这 
个 插件 看 上 去 像 完全 内 构 在 网 页 里 面 一 样 。 
【 例 3-3】 使 用 article 元 素来 表示 插件 。 


<article> 



































<h1> 允 许 全 屏 代码 </hl> 
<object> 
«param name-"allowFullScreen" value="true" /> 
«embed src-"£" width="600" height="340"></embed> 
</object> 
</article> 
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3.3.2 ”给 内 容 分 块 : section 元 素 


section 元 素 主要 用 来 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。section 元 素 通 常 由 标 
题 和 内 容 组 成 。 但 section 元 素 并 不 是 容器 元 素 ， 所 以 不 能 用 CSS 来 泻 染 。 当 一 个 容器 需要 
直接 定义 样式 或 通过 脚本 控制 行为 时 ， 一 般 使 用 div 元 素 。 
以 下 是 一 段 使 用 section 元 素 的 代码 : 
«section 
*hI-PRC-hl- 
<p>The People's Republic of China was born in 1949...—/ p 
«section 
这 是 典型 的 section 元 素 的 结构 ， 由 标题 和 内 容 组 成 。 如 果 一 段 内 容 没 有 标题 ， 不 建议 使 
用 section 元 素来 表示 。 
section 元 素 的 作用 就 是 对 页 面 上 的 内 容 进 行 分 块 ， 或 者 说 对 文章 进行 分 段 ; 而 article 元 
素 则 是 表示 “有 着 自己 完整 的 、 独 立 的 内 容 ” 需要 将 这 两 个 元 素 区 分 清楚 。 
下 面 来 看 一 个 结合 使 用 article 元 素 和 section 元 素 的 示例 , 以 便 更 加 清晰 地 区 分 这 两 个 元 
素 的 功能 。 
【 例 3-4】 一 个 嵌 套 了 多 个 section 元 素 的 article 元 素 。 
«article 






























































<hl>WWF and WWF's Panda symbol-/h1^ 
«section 
«22 WWF-h2- 
Se 
The World Wide Fund for Nature (WWF) is an international organization 
working on issues regarding the conservation, research and restoration of the environment, formerly named the 
World Wildlife Fund. WWF was founded in 1961. 
<p> 
</section> 
<section> 
<h2>WWF's Panda symbol</h2> 
Ep 
The Panda has become the symbol of WWF. The well-known panda logo of 
WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in 
the same year of the establishment of WWF. 
<p> 
</section> 
</article> 
这 个 示例 中 的 文章 是 独立 、 完 整 的 内 容 ， 因 此 外 层 用 article 元 素来 表示 。article 元 素 中 
又 包括 一 个 hl 标题 和 两 个 section 元 素 ， 每 一 个 section 元 素 的 内 容 都 由 标题 和 内 容 组 成 。 从 
内 容 上 来 说 ， 这 是 有 关 WWF 及 其 熊猫 标识 的 一 篇 文章 ， 文 章 中 分 别 阐述 了 WWE 及 其 熊猫 
标识 ， 这 两 块 内 容 组 合 起 来 正 是 标题 所 要 描述 说 明 的 ， 逻 辑 清晰 明确 ， 因 此 用 article 元 素来 
表示 这 篇 文章 ， 而 文章 内 使 用 section 元 素来 按 逻 辑 划 分 区 块 。 
另外 ，section 元 素 也 可 以 包含 多 个 article 元 素 ， 以 下 就 是 一 个 包括 多 个 article 元 素 的 
section 元 素 的 代码 清单 。 
【 例 3-5】 在 section 元 素 中 媒 套 多 个 article 元 素 。 
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«section 
<hl> 哺 乳 动物 <hl> 
<p> 痛 椎 动物 亚 门 的 一 纲 ， 通 称 兽 类 。</p> 
article 
<h2> 原 兽 亚 纲 <h2> 
<p> 原 兽 亚 纲 (Prototheria) 是 哺乳 纲 动物 的 其 中 一 个 亚 纲 , 现存 只 有 1 目 ( 单 孔 目 )2 
科 3 属 3 种， 只 分 布 在 大 洋 洲 地 区 。</p> 
</article> 
<article> 
<h2> 异 曾 亚 纲 </h2> 
<p> 多 瘤 齿 曾 目 为 异 曾 亚 纲 (Allotheria) 中 仅 有 的 一 类 哺乳 动物 【 见 哺乳 纲 (化 石 )。<p> 
</article> 
<article> 
<h2> 后 曾 亚 纲 </h2> 
<p> 哺 乳 纲 的 一 个 亚 纲 ， 又 称 有 袋 亚 纲 。 在 进化 上 为 界 于 卵 生 的 单 孔 类 和 高 等 的 
有 胎盘 类 之 间 的 哺乳 动物 。 其 特点 是 : 胎生 ， 但 大 多 数 无 真正 的 胎盘 ， 母 曾 具有 特殊 的 育儿 袋 。</p> 
article 
«section 
这 个 示例 是 一 篇 文章 中 的 一 段 ， 因 此 没有 使 用 article 元 素 。 但 是 ， 这 一 段 可 以 分 为 几 块 
独立 的 内 容 ， 因 此 嵌入 了 几 个 独立 的 article 元 素 。 
看 到 这 里 , 也 许 有 的 读者 糊涂 了 , 这 两 个 元 素 怎 么 可 以 混淆 使 用 呢 ? 事实 上 , 在 HTMLS 
中 , article 元 素 可 以 看 成 一 种 特殊 种 类 的 section 元 素 , 它 比 section 元 素 更 强调 独立 性 。 section 
元 素 强 调 分 段 或 分 块 ， 而 article 元 素 强调 独立 性 。 具 体 来 说 ， 如 果 一 块 内 容 相对 来 说 比较 独 
立 、 完 整 ， 那 么 应 使 用 article 元 素 ; 但 是 如 果 将 一 块 内 容 分 成 几 段 ， 那 么 应 使 用 section 元 素 
进行 分 段 。 


e section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 ，section 元 素 的 作用 是 
对 页 面 上 的 内 容 进 行 分 块 ， 或 者 说 对 文章 进行 分 段 。 


e section 元 素 通 常 由 内 容 及 标题 组 成 。 通 常 不 推荐 为 那些 没有 标题 的 内 容 使 用 section 


e section 元 素 并 非 普 通 的 容器 元 素 ， 当 内 容 需 要 被 直接 定义 样式 或 通过 脚本 定义 行为 
时 ， 推 荐 使 用 div 而 非 section 元 素 ; 也 就 是 说 ， 不 要 将 section 元 素 用 作 设 置 样式 的 
页 面容 器 ， 那 是 div 元 素 要 做 的 工作 。 

e 如果 article、nav、aside 元 素 都 符合 条 件 ， 那 么 不 要 用 section 元 素 定 义 。 

e section 元 素 中 的 内 容 可 以 单独 存储 到 数据 库 中 或 输出 到 Word 文档 中 。 


3.3.3 ”设计 导航 信息 : nav 元 素 


nav 元 素 是 一 个 可 以 用 来 作为 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链 接 到 其 他 页 面 或 当 
前 页 面 的 其 他 部 分 。 

一 般 情 况 下 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 素 即 可 。 例 如 ， 在 页 脚 中 通常 
会 有 一 组 链接 ， 其 中 放 着 服务 条 款 、 首 页 和 版 权 声明 等 ， 这 时 使 用 nav 元 素来 组 织 并 不 适合 ， 
使 用 footer 元 素 最 为 恰当 。 
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一 个 页 面 可 以 拥有 多 个 nav 元 素 ， 作 为 页 面 整 体 或 不 同 部 分 的 导航 。 一 般 来 说 ，nav 元 
素 适 用 于 以 下 场景 : 传统 导航 条 、 侧 边栏 导航 条 、 页 内 导航 、 翻 页 操作 。 
nav 元 素 在 以 前 版 本 HTML 的 布局 中 作为 导航 条 相关 常用 命名 来 使 用 。 例 如 ， 下 面 是 一 
个 使 用 nav 元 素 作为 导航 的 例子 。 
【 例 3-6】 使 用 nav 元 素 做 简单 导航 。 
«nav 
<a href="/html/">HTML</a> | 
<a href="/css/">CSS</a> | 
<a href="/js/">JavaScript</a> | 
<a href-"/jquery/"»jQuery-/a 
</nav> 


上 述 代码 创建 了 一 个 导航 条 ， 其 中 
“JavaScript”, “jQuery”。 该 导航 可 用 于 
由 于 nav 元 素 是 与 导航 相关 的 ， 因 


包含 4 个 用 于 导航 的 超 链 接 ， 即 “HTML”、“CSS”、 
全 局 导航 ， 也 可 以 放 在 某 个 段落 中 作为 区 域 导航 。 





标签 一 样 来 使 用 <nav> 标 签 ， 可 以 添加 id 
相关 地 方 使 用 ， 所 以 在 HTML 网 页 布局 
局 使 用 。 

接 下 来 看 一 个 使 用 nav 元 素 的 示例 
接 ， 但 只 将 最 主要 的 链接 放 入 nav 元 素 


此 一 般 用 于 网 站 导航 布局 。 可 以 像 使 用 div 标签 、span 
或 class 属性 。nav 与 div 标签 不 同 的 是 ，nav 只 在 导航 
中 可 能 就 在 导航 条 处 使 用 ， 或 在 与 导航 条 相关 的 地 方 布 


， 其 中 ， 一 个 页 面 由 若干 部 分 组 成 ， 每 部 分 都 带 有 链 
， 如 以 下 代码 所 示 。 


【 例 3-7】 使 用 nav 元 素 设计 页 面 导航 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 


<nav> 


<li><a href="#"> 1: ji </a></li> 
<li><a hre 伍 "#'> 开 发 文档 <Ja></li> 


<article> 
<header> 


<hl>Java 与 C++ 的 历史 hl> 


<nav> 
<ul> 
<li><a 
<li><a 
<h> 
</nav> 
</header> 
<section> 


hre£-"£"-Java 的 历史 </a></li> 
hre 伍 "#'*>C+H+ 的 历史 </a></li> 


<hl>Java 历史 </hl> 
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«section 
«section 
<hl>C++ 历 史 <hl> 
</section> 
<footer> 
<a bre 全"#" > 删除 </a> 
<ahre 全 "六 > 修改 </a> 
</footer> 
</article> 
<footer> 


<p><small> 版 权 声明 : </small></p> 
</footer> 


</body> 
<html> 


运行 以 上 代码 ， 效 果 如 图 3-1 所 示 。 

综 上 可 知 ， 使 用 nav 元 素 时 需要 注意 : ro GN 

。 并 不 是 所 有 的 链接 都 必须 使 用 nav 元 | iens 
素 ， 它 只 用 来 将 一 些 热门 的 链接 放 入 
导航 栏 。 例 如 ，footer 元 素 就 常用 来 在 
页 面 底部 包含 一 个 不 常用 到 ， 且 没 必 
要 加 入 nav 元 素 的 链接 列表 。 

。 一 个 网 页 也 可 能 含有 多 个 nav 元 素 .个 
如 ， 一 个 是 网 站 内 的 导航 列表 ， 另 一 
个 是 本 页 面 内 的 导航 列表 。 

。 对 于 屏幕 阅读 有 障碍 的 人 ， 可 以 使 用 
nav 元 素来 确定 是 否 忽略 初始 内 容 。 


3.84 设计 辅助 信息 : aside 元 素 


aside 元 素 表示 跟 这 个 页 面 的 其 他 内 容 关 联 性 不 强 或 者 没有 关联 的 内 容 , 一 般 是 一 些 附属 
信息 。aside 元 素 通常 用 来 在 侧 边栏 显示 一 些 定义 ， 比 如 目录 、 索 引 、 术 语 表 等 ， 也 可 以 用 来 
显示 相关 的 广告 宣传 、 作 者 介绍 、Web 应 用 、 相关 链接 、 当 前 页 内 容 简介 等 。 但 不 要 使 用 aside 
元 素 标记 括号 中 的 文字 ， 因 为 这 种 类 型 的 文本 被 认为 是 主 内 容 的 一 部 分 。 
aside 元 素 有 以 下 两 种 使 用 情景 : 
e aside 元 素 作为 内 容 的 附属 信息 部 分 呈现 ， 这 种 情况 P. aside 元 素 被 放 在 article 元 素 
中 ， 内 容 是 和 当前 文章 有 关 的 参考 资料 和 名 词 解释 等 。 
e aside 元 素 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 呈现 ， 在 article 元 素 之 外 使 用 。 最 典型 
的 形式 是 侧 边栏 ， 其 中 的 内 容 可 以 是 友情 链接 ， 博 客 中 的 其 他 文章 列表 、 广 告 单 元 等 。 
【 例 3-8】 下 面 是 一 个 完整 的 aside 元 素 的 使 用 示例 。 


<body> 
<header> 


<hl>HIML5 从 入 门 到 精通 </h1> 
</header> 














Java 与 C++ 的 历史 /h1> 





图 3-1 程序 运行 效果 图 
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<article> 
<hl> 语 法 <hl> 
<p> 文 章 的 正文 。。。。</p> 
<aside> 
<h1> 名 词 解释 </h1> 
<p> 语 法 : 这 是 重要 的 前 端 语言 <p> 
</aside> 


<nav> 
<h2> 评 论 <h2> 
<b 
<li><a href}="#">2017-06-01</a></li> 
<li><a href="#"> X: 学 习 </a></li> 
«ul 
«nav 
</aside> 
<time datetime="2017-06-01">2017-06-01</time> 
<time datetime="2017-06-01T20:00">2017-06-01</time> 
«time datetime="2017-06-01T20:00Z">2017-06-01</time> 


<time datetime="2017-06-01T20:00+09:00">2017-06-01</time> 


</body> 
执行 以 上 代码 , 运行 效果 如 图 3-2 所 示 。 在 以 上 代码 中 ,第 一 个 aside 元 素 被 放置 在 一 个 


article 元 素 内 部 ， 因 此 引擎 将 该 aside 元 素 的 内 容 理解 成 是 和 article 元 素 的 内 容 相 关联 的 ; 
第 二 个 aside 元 素 是 评论 信息 ， 是 文章 的 附属 信息 ， 因 此 独立 于 article 元 素 之 外 存在 。 


Q fi |[512700.1:8020/ch03/asidehtml $7 


HTML5 从 入 门 到 精通 
语法 
文章 的 正文 。。。， 
名 词 解释 
语法 ， 这 是 重要 的 前 冰 语 言 
评论 
» 2017-06-01 
DER TJ 
5017-06-01 2017-06-01 2017-06-01 2017-06-01 


图 3-2 程序 运行 效果 


3.8.5 ”设计 微 格式 ， time 元 素 


微 格式 是 一 种 利 月 





闻 事 件 的 发 9 








而 


H HTML 的 class 属性 来 对 网 页 添加 附加 信息 的 方法 。 附 加 信息 包括 新 
E 日 期 和 时 间 、 个 人 电话 号 码 、 企 业 邮 箱 等 。 


微 格式 并 不 是 HTMLS5 之 后 才 有 的 ， 但 以 前 使 用 的 时 候 ， 日 期 和 时 间 在 机 器 编码 上 出 现 
了 一 些 问题 ， 编 码 过 程 中 会 产生 歧义 。HITML5 新 增 的 time 元 素 ， 能 够 无 歧义 、 明 确 地 对 机 
器 的 日 期 和 时 间 进 行 编 码 ， 且 更 易 读 。time 元 素 代表 24 小 时 中 的 某 个 时 刻 或 某 个 日 期 ， 表 
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示 时 刻 时 允许 带 时 差 。 它 可 以 定义 很 多 种 格式 ， 例 如 : 

time datetime="1989-11-13">1989 年 11 月 13 日 <time> 

time datetime="1989-11-13">11 月 13 日 <time> 

<time datetime="1989-11-13"> 我 的 生日 <time> 

time datetime="1989-11-13T20:00"> 我 生日 的 晚上 8 点 </time> 

«time datetime="1989-11-13T20:00z"> 我 生日 的 晚上 8 点 </time> 

<time datetime="1989-11-13T20:00+09:00"> 我 生日 的 晚上 8 点 的 美国 时 间 </time> 

编码 时 ， 计 算 机 读 到 的 部 分 是 datetime 属性 的 值 ， 而 元 素 的 开始 标记 与 结束 标记 之 间 的 

内 容 显 示 在 网 页 上 ;datetime 属性 值 中 日 期 与 时 间 之 间 要 用 T 分 隔 ，T 表示 时 间 ;， 在 时 间 后 
面 加 上 Z， 表示 给 机 器 编码 时 使 用 UTC 标准 时 间 ， 上 面 最 后 一 种 格式 加 上 了 时 差 ， 表示 向 机 
器 编码 另 一 地 区 时 间 ， 如 果 是 本 地 时 间 ， 则 不 需要 添加 时 差 。 


3.8.6 ”添加 发 布 日 期 : pubdate 属性 


pubdate 属性 是 可 选 的 、 布 尔 属性 。 它 可 以 用 到 time 元 素 上 ， 表 示 文 章 或 整个 网 页 的 发 
布 日 期 。 比 如 : 
<time datetime-"2017-05-11" pubdate>2017 年 05 月 11 H</time> 
需要 注意 的 是 ，time 元 素 不 能 直接 代表 发 布 日 期 ， 只 有 增加 了 pubdate 属性 才能 代表 发 
布 日 期 。 
为 什么 直接 用 time 元 素 表 示 日 期 和 时 间 时 无 法 代表 发 布 日 期 呢 ? 看 看 下 面 的 代码 ; 
«article 
<header> 
<h1> 端 午 8260 万 人 次 出 游 人 均 消 费 近 2 千 元 较 去 年 翻番 </h1> 
<p> 发 布 日 期 <time datetime="2017-05-31 07:30:00" pubdate>2017-05-31 07:30:00</time></p> 
<p> 关 于 <time datetime-"017-06-01 07:30:00">5 月 31 日 </time> 的 不 实 报道 更 正 </p> 
</header> 
<p>5 月 30 日 ， 国 家 旅游 局 发 布 的 《2017 年 端午 节假日 旅游 市 场 总 结 》( 以 下 简称 《2017 端午 总 
结 》) 显 示 ，2017 年 端午 假日 期 间 ， 全 国共 计 接 待 游客 8260 万 人 次 ， 实 现 旅游 收入 337 亿 元 。 记 者 综合 





端午 节 数 据 发 现 ， 今 年 端午 节 出 境 游 持 续 火 热 ， 其 中 ,“ 一 带 一 路 ”沿线 游 备 受 青睐 ; 国内 游 市 场 亦 迎 
来 高 峰 ， 亲 子 游 成 为 新 亮点 ;在 消费 方面 ， 今 年 人 均 消费 近 2000 元 ， 较 去 年 翻番 。</p> 
«footer 
-p»http://china.huanqiu.com/article/2017-05/10771187.html?from-bdwz-/p-- 
«footer 
</article> 


在 这 个 例子 中 ， 有 两 个 time 元 素 ， 分 别 定义 了 两 个 日 期 : 更 正 日 期 和 发 布 日 期 。 由 于 都 
使 用 了 time 元 素 ， 因 此 需要 使 用 pubdate 属性 来 表示 哪 一 个 time 元 素 代表 发 布 日 期 。 


34 添加 语义 模块 


除了 以 上 几 个 表示 主体 内 容 的 结构 元 素 之 外 ，HTML5 还 新 增 了 一 些 表示 逻辑 结构 和 附 
加 信息 的 非 主体 结构 元 素 。 本 节 主要 介绍 几 个 重要 的 非 主体 结构 元 素 。 
3.4.1 添加 标题 块 : header 元 素 

header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 
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内 容 区 块 的 标题 ， 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 搜 索 表 单 或 相关 的 logo 图 片 。 因 此 ， 
整个 页 面 的 标题 都 应 该 放 在 页 面 的 开头 。 例 如 : 
<header><hl> 页 面 标题 <hl></header> 
一 个 页 面 内 可 以 包括 多 个 header 元 素 。 
【 例 3-9】 一 个 包括 多 个 header 元 素 的 网 页 。 
<body> 
<header> 
<h1> 网 页 标题 </h1> 
</header> 





<h1> 文 章 标题 </h1> 
</header> 
<p> 文 章 正文 <p> 


在 HTMLS 中 ， 一 个 header 元 素 通常 包括 至 少 一 个 标题 元 素 ， 即 元 素 hl~h6。 也 可 以 包 
括 后 面 将 要 讨论 的 hgroup 元 素 ， 以 及 其 他 元 素 ， 如 nav 元素。 
【 例 3-10】 下 面 是 一 个 网 页 的 头 部 区 域 的 代码 ， 整 个 头 部 内 容 都 放 在 header 元 素 中 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<hgroup> 
<h1> 百 度 新 闻 </h1> 
<a href="#'> 网 页 </a><a hre 伍 "#"> 新 闻 </a><a href-"" Milla 
</hgroup> 
<nay> 
<ul> 
<i> Ñ T<> 





3.4.2 ”给 标题 分 组 : hgroup 元 素 


hgroup 元 素 可 以 对 标题 或 子 标题 进行 分 组 ,通常 与 h1~h6 元 素 组 合 使 用 ， 一 个 内 容 块 中 
的 标题 及 子 标题 可 以 通过 hgroup 元 素 组 成 一 组 . 但是， 如 果 文章 只 有 一 个 主 标题 ， 则 不 需要 
hgroup 元 素 。 
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【 例 3-11】 使 用 hgroup 元 素 对 主 标题 、 副 标题 和 标题 说 明 进 行 分 组 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>hgroup</title> 





<header> 
<hgroup> 
<h1> 小 朋友 的 “大 朋友 ”</h1> 
<h2> 民 族 精神 为 中 国 梦 塑 心 聚 能 “ 犬 硕 奋进 的 五 年 <h2> 
<h3> 纪 录 片 <h3> 
</hgroup> 
Do 
time datetime-"2017-05-31 19:42:42"> 发 布 时 间 : 2017-05-31 19:42:42</time> 
<p> 
</header> 
<p> 操 场 上 、 教 室 里 、 少 年 宫 的 活动 中 …… 都 留 下 了 这 位 “大 朋友 ”和 孩子 们 的 美好 
回忆 。</p> 
</article> 
</body> 
</html> 


3.4.8 ”添加 脚注 块 : footer 元 素 


footer 元 素 可 以 作为 内 容 块 的 脚注 ， 比 如 在 父 级 内 容 块 中 添加 注释 ， 或 者 在 网 页 中 添加 
版 权 信 息 等 。 脚 注 信息 的 形式 有 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 
【 例 3-12】 footer 元 素 的 使 用 。 
«IDOCTYPE html> 
<html> 
<head> 
«meta charset-"UTF-8"— 
<title>footer</title> 
</head> 
<body> 
<article> 
<header> 
<hgroup> 
<h1> 北 京 新 闻 <hl> 
<h2> 午 后 北京 北部 及 东部 有 雷阵雨 本 周 最 高 气温 普遍 超 30C<h2> 
<h3> 中 国 天 气 网 讯 <h3> 
</hgroup> 
P 
time datetime="2017-05-31 07:51:00"> 发 稿 时 间 : 2017-05-31 07:51:00</time> 
<p> 
[header 
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<p> 今 天 (31 日 ) 是 小 长 假 后 第 一 天 上 班 ， 北 京 天 气 比较 复杂 ……</p> 
«article 
«footer 
«ul 
XT 
i-i 
li huuc «i 
«ul 
</footer> 
</body> 
</html> 
与 header 元 素 一 样 ， 一 个 网 页 中 也 可 以 重复 使 用 footer 元 素 ， 还 可 以 为 article 元 素 和 
section 元 素 添 加 footer 元 素 。 在 此 不 再 袭 述 。 


3.4.4 添加 联系 信息 : address 元 素 


address 元 素 用 来 在 文档 中 呈现 联系 信息 , 包括 文档 作者 或 文档 维护 者 的 名 字 、 文 档 作 者 
或 文档 维护 者 的 网 站 链接 、 电 子 邮 箱 、 真 实地 址 、 电 话 号 码 等 。address 元 素 应 该 不 只 用 来 呈 
现 电子 邮箱 或 真实 地 址 ， 还 可 以 用 来 展示 跟 文 档 相 关 的 联系 人 的 所 有 联系 信息 。 辟 如， 以 下 
示例 展示 了 一 些 博 客 中 某 篇 文章 评论 者 的 名 字 以 及 在 博客 中 的 网 址 链接 。 
【 例 3-13】 博客 中 某 篇 文章 评论 者 的 名 字 以 及 在 博客 中 的 网 址 链接 。 
<address> 
<a href-"http://blog.sina.com.cn/s/blog 5fa2c9c70102wt4m html"> 用 户 6260398778</a> 
<a href-"http://blog.sina.com.cn/s/blog 5fa2c9c70102wt4m html">cassano26</a> 
<a href-"http:/blog.sina.com.cn/s/blog 5fa2c9c70102wt4m html"> 黄 涛 </a> 

















</address> 
【 例 3-14】 综合 使 用 footer 元 素 、time 元 素 和 address 元 素 。 
<footer> 
<div> 
<address> 
<a title=" 文 章 作者 : 黄涛 " href-"http://blog.sina.com.en/s/blog. 5fa2c9c70102wt4m html" 
黄涛 </a> 
</address> 
发 表 于 <time datetime="2017-05-31">2017 年 5 月 31 H</time> 
</div> 
</footer> 


在 这 个 示例 中 ， 把 博客 文章 的 作者 、 博 客 的 主页 链接 作为 作者 信息 放 在 address 元 素 中 ， 
把 文章 发 表 日 期 放 在 time 元 素 中 ， 把 这 个 address 元 素 与 time 元 素 中 的 总 体内 容 作为 脚注 信 
息 放 在 footer 元 素 中 。 





35 本 章 小 结 


为 了 增强 Web 的 实用 性 ，HTML5 引入 了 许多 新 技术 ， 对 传统 HTML 元 素 进行 了 分 类 ， 
并 根据 开发 人 员 的 习惯 和 实践 中 常用 的 功能 ， 以 及 Web 应 用 跨 平台 的 发 展 需 求 , 增加 了 大 量 
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新 元 素 、 新 功能 。 本 章 详细 介绍 了 HIMLS 中 新 增 的 主体 元 素 、 语义 元 素 ,主要 包括 如 下 内 容 : 


Ao r2 一 


HTMLS 文档 结构 

HTMLS 元 素 的 分 类 介绍 

HTMLS 新 增 的 主体 元 素 ， 诸 如 article, section, nav, aside, pubdate 等 
HTMLS 新 增 的 语义 元 素 ， 诸 如 header, hgroup, footer, address 等 


3.6 思考 和 练习 


简单 描述 HTMLS 文档 的 结构 ， 并 指出 每 个 部 分 的 含义 。 


. HTMLS 新 增 了 哪些 主体 元 素 ? 简单 描述 这 些 元 素 的 使 用 场景 。 
. HIMLS 新 增 了 哪些 语义 元 素 ? 简单 描述 这 些 元 素 的 使 用 场景 。 
.使 用 本 章 介绍 的 HTML 文档 结构 知识 及 新 增 元 素 构建 一 个 简单 的 网 页 。 
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表单 在 网 页 设计 中 起 到 数据 收集 的 作用 ， 换 言 之 ， 可 以 将 表单 看 作 人 机 交互 界面 ， 用 户 
填写 表单 信息 ， 就 像 在 银行 柜台 填 单 子 一 样 ， 填 好 表单 内 容 后 ， 单 击 “ 提 交 ” 按 钮 ， 把 数据 
提交 到 服务 器 端 ， 服 务 器 端 获 取 用 户 填 写 的 信息 ， 然 后 将 信息 存储 到 数据 库 中 ， 以 备 后 期 所 
需 。 通 过 使 用 表单 ， 可 以 采集 访问 者 的 信息 ， 如 姓名 、 性 别 、 年 龄 、 职 业 、 联 系 方式 等 ， 也 
可 以 用 作 调 查 表 、 留 言 板 等 。 访 问 者 和 后 台 的 交互 主要 通过 单 击 “ 提 交 ” 按 钮 来 实现 ， 而 与 
前 端的 交互 则 通过 输入 数据 或 选择 选项 来 实现 。 

HTMLS 在 表单 方面 增加 了 许多 功能 , 如 输入 类 型 、 表 单元 素 、 表 单 属性 和 输入 属性 等 。 
这 些 属性 主要 在 总 结 以 往 表单 常用 操作 的 基础 上 提炼 而 来 ， 以 使 前 端 设 计 人 员 的 工作 更 加 
高 效 。 

本 章 学 习 目 标 : 

了 解 HTMLS 表单 中 新 增 的 表单 属性 ， 包 括 autocomplete 和 novalidate 属性 
掌握 新 增 的 表单 元 素 ， 包 括 datalist、keygen 和 output 元 素 

掌握 新 增 的 输入 类 型 ， 包 括 email、url、number、Date Pickers, search, tel, color 等 
掌握 新 增 的 输入 属性 ,包括 form、formaction、formmethod、formenctype、formtarget、 
autofocus, required, labels, control. placeholder, list, pattern 等 

e 熟悉 表单 验证 操作 ， 包 括 自动 验证 、 取 消 验证 和 显 式 验证 
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在 创建 Web 应 用 程序 时 , 免不了 会 用 到 大 量 的 表单 元 素 。 HTMLS5 标准 吸纳 了 Forms 2.0 
标准 ， 强 化 了 针对 表单 元 素 的 功能 ， 为 表单 增加 了 一 些 新 的 属性 。 


4.1.1 autocomplete 属性 








辅助 输入 所 用 的 自动 完成 功能 ， 可 以 提高 输入 效率 。 在 HIML5 之 前 ， 因 为 谁 都 可 以 看 
见 输入 的 值 ， 所 以 在 安全 方面 存在 缺陷 。 只 要 使 用 autocomplete 属性 ， 就 可 以 在 安全 性 方面 
实现 很 好 的 控制 。 
对 于 autocomplete 属性 ， 可 以 指定 为 oa、off 和 空 值 (不 指定 )。 在 不 指定 时 ， 使 用 浏览 器 
的 默认 值 。 设 置 为 on 时 ， 可 以 显 式 指定 候补 输入 的 数据 列表 。 在 执行 自动 完成 时 ， 可 以 用 
datalist 元 素 与 list 属性 提供 候补 输入 的 数据 列表 (datalist 元 素 将 在 后 面 介 绍 )，datalist 元 素 中 
的 数据 将 作为 候补 输入 的 数据 在 文本 框 中 自动 显示 。autocomplete 属性 的 使 用 方法 如 下 : 
«input type="text" name-"greeting" autocomplete="on" list-"greetings" /> 
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4.1.2 novalidate 属性 


表单 元 素 的 novalidate 属性 用 于 在 提交 表单 时 取消 整个 表单 的 验证 ， 即 关闭 对 表单 内 所 
有 元 素 的 有 效 性 检查 。 如 果 希 望 只 取消 表单 中 较 少 部 分 内 容 的 验证 而 不 妨碍 提交 大 部 分 内 容 ， 
可 以 将 novalidate 属性 单独 用 于 表单 中 的 这 些 元 素 。 
【 例 4-1】 novalidate 属性 的 使 用 。 
<form action="http://localhost/h5css3/serverl php" method="post" novalidate-"true"-- 
电子 邮箱 :<input type="email" name="email address" /> 
<input type="submit" value=" 确 定 " /> 
</form> 
以 上 代码 的 运行 效果 如 图 4-1 所 示 。 可 以 看 到 ， 输 入 内 容 aaa 之 后 ， 单 击 【 确 定 】 按 钮 ， 
并 没有 对 表单 内 容 进 行 检查 ， 直 接 就 调用 服务 器 端的 serverl php 文件 ， 输 出 【电子 邮箱 】 输 
入 框 中 的 内 容 。 
serverl php 文件 中 的 程序 代码 如 下 (本 书 不 对 PHP 进行 介绍 ， 请 读者 阅读 网 上 资料 以 配 
Tt PHP 运行 环境 ): 
<?php 
$content = $ POST['email address']: 
echo "-pre»" Scontent."-pre»": 
T 





D novalidate 悍 性 的 使 用 x N= 和 
-> QC fi |D 12720.0.1:8020/ch04/12v & 


D lecalhost/hScss3/serve: x WN 
Q fi (localhost/hscss3/serv??| 三 


电子 邮箱 ，|aaa | 确定 





图 4-1 关闭 表单 验证 的 示例 效果 
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HTMLS 中 新 增 了 几 个 表单 元 素 ， 分 别 是 datalist、keygen 和 output。 本 节 就 来 简单 介绍 
这 几 个 表单 元 素 。 


4.2.1 datalist 元 素 


datalist 元 素 用 于 为 输入 框 提供 一 个 可 选 的 列表 , 用 户 可 以 直接 选择 列表 中 的 某 个 预 设 的 
项 ， 从 而 免 去 输入 的 麻烦 。 这 个 可 选 的 列表 由 datalist 元 素 中 的 option 元 素 创 建 。 如 果 用 户 不 
希望 从 列表 中 选择 某 项 ， 也 可 以 自行 输入 其 他 内 容 。 

在 实际 使 用 中 , 如 果 想 要 把 datalist 元 素 提供 的 列表 绑 定 到 某 个 输入 框 , 则 需要 使 用 输入 
框 的 list 属性 来 引用 datalist 元 素 的 id. 

【 例 4-2】 datalist 元 素 的 使 用 。 








请 选择 汽车 品牌 : 
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<input list-"cars" /> 
<datalist id="cars"> 
<option value=" 宝 马 "> 
<option value= "一汽 大 众 "> 
<option value= "本田 "> 
</datalist> 
</body> 
运行 以 上 代码 , 效果 如 图 4-2 所 示 。 需 要 注意 的 是 ,每 一 个 option 元 素 都 必须 设置 value 
属性 。 





图 4-2 datalist 元 素 的 运行 效果 图 


4.2.2 keygen tX 


keygen 元 素 是 密 钥 对 生成 器 , 主要 用 于 验证 。 用 户 提交 表单 时 会 生成 两 个 键 : 一 个 私 钥 ， 
一 个 公 钥 。 其 中 ， 私 钥 存储 在 客户 端 ， 公 钥 被 发 送 到 服务 器 。 公 和 钥 可 用 于 验证 用 户 的 客户 端 
证 书 。 下 面 是 一 个 使 用 keygen 元 素 的 例子 。 
【 例 4-3】 keygen 元 素 的 使 用 。 
«form action-"http://localhost/h5css3/keygen.php" method-"post"- 
用 户 名 : <input type="text" name-"user name" /> 加 密 : 
<keygen name-"security" /> 
<input type-"submit" /> 
</form> 
运行 以 上 代码 , 效果 如 图 4-3 所 示 。 输入 用 户 名 landy, 选择 加 密 强度 , 然后 单 击 【 提 交 】 
按钮 ， 将 表单 信息 提交 到 服务 器 端 。 服 务 器 端 显示 用 户 输入 的 用 户 名 landy 和 keygen 元 素 中 
加 密 后 的 内 容 。 需 要 注意 的 是 ， 在 Chrome 浏览 器 中 ，keygen 元 素 的 加 密 强度 只 有 两 种 ， 分 
别 是 2048( 高 强度 ) 和 1024( 中 等 强度 )。Opera 浏览 器 则 支持 更 多 的 加 密 强度 。 


D localhost/h5css3/keyge x W N 
€ > C fi D localhost/h5css3/ke {r = 


€ -> QC fi [D 127.0.0.1:8020/ch04/keygen. ?v| = 


用 户 名 : [and ME [1024 Ra v 
(iz 





landy 
MIIBOjCBpDCBnzANBgkqhkiG9wOBAQEF AAOB 3QAwgYk 





图 4.3 keygen 元 素 的 运行 效果 图 
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4.23 output 元 素 


output 元 素 主 要 用 于 显示 计算 结果 或 脚本 输出 。 
【 例 4-4】 output 元 素 的 使 
<head> 
«meta charset="UTF-8"> 
<title>output 元 素 的 使 用 </title> 
<script type="text/javascript"> 
function multiple() ( 
a 二 parseInt(prompt(" 请 输入 第 一 个 数 :",0)); 
b=parseInt(prompt(" 请 输入 第 二 个 数 : "0)); 
document.forms['forml']['result].value=a+b; 














} 
</script> 
</head> 
<body onload="multiple0"> 
<form method="post" name-"form1" 
计算 两 数 的 和 <input type="submit" value-"i] f /> 
<output name="result"></output> 
</form> 
</body> 
运行 以 上 代码 ， 当 页 面 加 载 时 ， 首 先 提示 输入 第 一 个 数 ， 输 入 2， 单 击 【 确 定 】 按 钮 ; 
接 下 来 输入 3， 再 次 单 击 【确定 】 按 钮 ， 页 面 显 示 出 计算 结果 ， 如 图 4-4 所 示 。 








-5 
打开 新 的 标签 页 XJ 个 output 元 素 的 使 用 x 
X f D h27.0.0.1:8020/ch04/0utput.html z 
计算 两 数 的 和 ，|[ 计算 
127.0.0.1:8020 上 的 网 页 显示 : 5 
Gumi C fi D h27.0.0.1:8020/ch04, 
al x 
[ 计算 两 数 的 和 ，| 计算 | 5 
az E 





图 4-4 output 元 素 的 运行 效果 图 
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在 HIMLS 出 现 之 前 ，HTML 表单 支持 的 输入 类 型 如 表 4-1 所 示 。 
表 4-1 HTML5 版 本 之 前 支持 的 输入 类 型 





WAGES HTML RES ETE 
Nom 定 又 单行 输入 字 民 ， 用 于 在 表单 中 畏 入 字母 
Xem cup 数字 等 内 容 。 默 认 宽度 为 20 个 字符 





PET o. ROUBENEHL. HET IGECFRGEHGRR3RRUR 
M input type-"radio* 一 ， 常 和 其 他 类 型 的 输入 框 构成 一 组 使 用 
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EK) 
输入 类 型 HTML 代码 功能 说 明 
gi perta cx 用 于 从 若干 给 定 选项 中 选取 一 项 


THA ipu pe "bait EEL RET ERGREORUESESUROS E 
定义 普通 可 单 市 按 饥 ， 多 数 情况 下 ， 用 于 通过 
JavaScript 启动 脚本 

^ TUE REXUEBEUE IUBET TEE 
Sn" ipi tpe "riis 不 同 的 图 像 来 自 定义 这 种 按钮 的 样式 

Vest 定义 隐藏 的 输入 字段 

m HEURE ROUEREAML. JP SIEGE E CREER 
RERI Sp et 清除 表单 中 的 所 有 数据 

TP input type" fle 定义 输入 字段 和 “浏览 ” 按 钱 ， 用 于 上 传 文 件 





可 单 击 按钮 <input type="button"> 








HTMLS 在 HTMLA 的 基础 之 上 ， 增 加 了 许多 表单 输入 类 型 ， 增 强 了 输入 控制 和 验证 。 
下 面 举例 对 新 增 的 输入 元 素 进行 说 明 。 


4.3.1 email 类 型 


email 类 型 的 输入 元 素 是 一 种 专门 用 于 输入 e-mail 地 址 的 文本 输入 框 ， 在 提交 表单 的 时 
候 ， 会 自动 验证 e-mail 输入 框 的 值 。 如 果 不 是 一 个 有 效 的 email 地 址 ， 该 输入 框 将 不 允许 提 
交 该 表单 。 在 以 前 版 本 的 Web 表单 中 , 采用 的 是 <input type="text"> 这 种 纯 文本 输入 框 来 输入 
e-mail 地 址 。 从 用 户 的 角度 来 说 ， 很 难看 出 这 种 输入 框 的 变化 ， 因 为 多 数 支持 HIMLS 的 新 
版 浏览 器 只 是 简单 地 将 e-mail 地 址 输入 框 显示 为 与 纯 文 本 输入 框 完全 相同 。 
email 类 型 的 input 元 素 的 用 法 如 下 : 
<input type-"email" name="email address"/> 
【 例 4-5】 email 类 型 的 应 用 。 
<form action-"http;//localhost/hScss3/form.php" method-"post"-- 
电子 邮箱 : <input type-"email" name-"content" /> 
<input type="submit" value-" 提 交 "/> 
</form> 
运行 以 上 代码 ， 效 果 如 图 4-5 所 示 。 如 果 输 入 错误 的 e-mail 地 址 格式 ， 单 击 【提交 ]】 按钮 
时 会 出 现 如 图 4-6 所 示 的 “请 在 电子 邮件 地 址 中 包括 (@'，aaa 中 缺少 (@'” 的 提示 信息 。 





D emaigk 弄 的 使 用 emassa 
QC fi D 127.00.1:8020/ch04/email.h Y? > Q fé Ò 1270..1:8020/ch04/email.h v 三 


aea [EE amea w R 


D 请 在 电子 部 件 地 址 中 包括 "@"。“ 
aaa" 中 缺少 "@"。 





图 4-5 程序 运行 效果 图 4-6 输入 e-mail 错误 时 弹出 的 错误 提示 
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4.3.2 url 类 型 


url 类 型 的 输入 元 素 提供 用 于 输入 URL 地 址 这 类 特殊 文本 的 文本 框 。 当 提交 表单 时 ， 如 
果 输 入 的 内 容 是 URL 地 址 格式 的 文本 ， 则 会 提交 数据 到 服务 器 ; 如 果 不 是 URL 地 址 格式 的 
文本 ， 则 不 允许 提交 。 
url 类 型 的 输入 元 素 的 用 法 如 下 : 
<input type-"url" name-"url info"/> 
【 例 4-6】 下 面 是 url 类 型 的 一 个 应 用 示例 。 
<body> 
<form action="http://localhost/hSess3/form php" method="post"> 
您 的 域名 : <input type="ur]" name="content" /> 
<input type="submit" value=" 提 交 "/> 
</form> 
</body> 
运行 以 上 代码 ， 效 果 如 图 4-7 所 示 。 如 果 输 入 错误 的 URL 地 址 格式 ， 单 击 “ 提 交 ” 按 钮 
时 会 出 现 如 图 4-8 所 示 的 “请 输入 网 址 。” 的 提示 。 
与 email 类 型 的 输入 框 相同 , 对 于 不 支持 ype='"url" 的 浏览 器 , 将 会 以 type="text" 来 处 理 ， 
所 以 并 不 妨碍 低 版 本 浏览 器 采用 HTMLS 中 type="url" 输 入 框 的 网 页 。 

















= Q fi | D 127.00.1:8020/ch04/u ??| & = Q fi D 1270.0.1:8020/ch04/u v? 三 


您 的 域名 ， (ax | 您 的 域名 : ee — à à 0 0 [sx] 





B 请 注入 网 址 . 





图 4-7 程序 运行 效果 图 4-8 URL 输入 错误 时 的 提示 


4.3.3 number 类 型 


number 类 型 的 输入 元 素 提供 用 于 输入 数值 的 文本 框 。 在 实际 使 用 中 ,可 以 设 定 对 所 接受 
的 数字 进行 限制 ， 例 如 ， 规 定 允 许 的 最 大 值 和 最 小 值 、 合 法 的 数字 间隔 或 默认 值 等 。 如 果 所 
输入 的 数字 不 符合 限制 要 求 ， 则 会 出 现 错误 提示 。 
【 例 4-7】 number 类 型 的 输入 元 素 的 使 用 。 
<body> 
<form action-"http://localhost/hScss3/form.php" method="post"> 
请 输入 一 个 数 : <input type-" number" name-"content" min="1" max-"100" step="5"/> 
<input type="submit" value=" 提 交 "/> 
</form> 
</body> 
以 上 代码 在 浏览 器 中 的 运行 效果 如 图 4-9 所 示 。 如 果 输 入 不 在 限定 范围 内 的 数字 ， 单 击 
“提交 ”按钮 后 会 出 现 如 图 4-10 所 示 的 提示 。 


。52 。 HTML5+CSS3 网 页 设计 基础 教程 








D number 关 型 的 使 用 x un 
> Q fi D 1270.0.1:8020/ch04/n v 
请 输入 一 个 数 : |101| 8 as 


> Q fi D 127.00.1:8020/ch04/n ve 
请 输入 一 个 数 ，| 





B 值 必须 小 于 或 等 于 100, 











图 4-9 程序 运行 效果 图 4-10 监测 到 不 在 限定 范围 内 的 数字 


图 4-10 显示 了 输入 大 于 规定 的 最 大 值 时 出 现 的 提示 。 同 样 ， 如 果 违 反 其 他 限定 ， 也 会 出 
现 相 关 提示 。 例 如 ， 如 果 输入 数值 3， 单 击 “ 提 交 ” 按 钮 时 会 出 现 值 无 效 的 提示 ， 如 图 4-11 
所 示 。 这 是 因为 限定 了 合法 的 数字 间隔 为 5， 在 输入 时 只 能 输入 5 的 倍数 ， 如 5、10、15 等 。 
又 如 ， 如 果 输 入 数值 -1， 则 会 提示 “ 值 必须 大 于 或 等 于 1。”， 如 图 4-12 所 示 。 


> C fi |D 127.00.1:8020/ch04/num 72 & > Q fi D 127.00.1:020/ch04/n vv | & 
请 输入 一 个 数 : 4o s E 3 请 输入 一 个 数 ,上 [ER 


Bl ineo e. positnm B 值 必 须 大 于 或 等 于 1。 
值 分 别 为 1 和 6， hss HN dal 


























图 4-11 出 现 值 无 效 的 提示 图 4-12 提示 “ 值 必须 大 于 或 等 于 1。” 
number 类 型 使 用 表 4-2 所 示 的 属性 来 规定 对 数字 类 型 的 限定 。 
表 4-2 number 类 型 的 属性 


属性 描述 
max 规定 允许 的 最 大 值 
min 规定 允许 的 最 小 值 
step 规定 合法 的 数字 间隔 
value 规定 默认 值 





需要 注意 的 是 ， 不 同 的 浏览 器 ，number 类 型 的 输入 框 的 外 观 也 会 有 所 不 同 。 
4.34 Date Pickers 类 型 


日 期 检 出 器 (Date Pickers) 是 网 页 中 经 党 要 用 到 的 一 各 控件， 在 HTMLS 之 前 的 版 本 中 ， 
并 没有 提供 任何 形式 的 日 期 检 出 器 控件 。 在 网 页 前 端 设计 中 ， 多 采用 一 些 JavaScript HEAK 
实现 日 期 检 出 器 控件 的 功能 ， 如 jQuery UI、YUI 等 ， 在 具体 使 用 时 会 比较 麻 需 。 

HTMLS 提供 了 多 个 可 用 于 选取 日 期 和 时 间 的 输入 类 型 ， 即 6 各 日 期 检 出 器 控件 ， 分 别 
用 于 选择 以 下 日 期 格式 : 日 期 、 月 、 星 期、 时 间 、 日 期 + 时 间 和 日 期 + 时 间 + 时 区 ， 如 表 4-3 
所 示 。 
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表 4-3 日 期 检 出 器 类 型 














功能 说 明 
<input type="date"> 选取 日 、 月 、 年 
<input type="month"> 选取 月 、 年 

选取 周 和 年 

选取 时 间 ， 包 括 小 时 和 分 钟 
<input type="datetime"> 选取 时 间 、 日 、 月 、 年 (UTC 时 间 ) 
<input type="datetime-local"> 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 





Hp, UTC 时 间 是 0 时 区 的 时 间 ， 而 本 地 时 间 为 地 方 时 间 。 如 果 北 京 时 间 为 早上 8 点 ， 
则 UTC 时 间 是 0 点 ， 即 UTC 时 间 比 北京 时 间 晚 8 小 时 。 

下 面 分 别 介绍 这 些 日 期 检 出 器 类 型 。 

1. date 类 型 

在 进行 信息 采集 时 ， 经 常 要 求 用 户 输入 日 期 ， 例 如 生日 、 购 买 日 期 、 订 票 日 期 等 。date 
类 型 的 日 期 检 出 器 以 日 历 的 形式 方便 用 户 输入 。 使 用 方法 如 下 : 

<input type-"date" name-"date]" value-"2017-05-1"/» 

date 类 型 的 日 期 检 出 器 的 外 观 如 图 4-13 所 示 。 当 用 户 将 鼠标 指针 移动 到 date 类 型 的 日 期 
检 出 器 上 时 ， 浏 览 器 中 显示 用 于 清除 内 容 的 又 号 按钮 、 用 于 向 上 或 向 下 调整 日 期 的 按钮 以 及 
用 于 设置 日 期 的 向 下 箭头 按钮 ， 运 行 效 果 如 图 4-14 所 示 。 














Q fi (»127.0.01:8020/ch04/dat v = 


年 /月 /日 sv 
D date 尖 型 的 使 用 x Un 2017 年 06 月 ~ 


Q fi D 12700.1:8020/ch f? = B- A- AZ 局 四 AA EA 


1 2 3 
年 /月 /日 5 6 7 8 9 10 


12 13 14 15 16 
19 20 21[22]| 23 
26 27 28 29 30 








图 4-13. date 类 型 的 日 期 检 出 器 的 外 观 图 4-14 将 鼠标 指针 移动 到 date 类 型 的 日 期 检 出 器 
上 时 的 显示 效果 
2. month 类 型 
month 类 型 的 日 期 检 出 器 用 于 选取 月 、 年 ， 即 选择 一 个 具体 的 月 份 , 如 2017 4E 5 月， 选 
择 后 会 以 “2017 年 05 月 ”的 形式 显示 。 
【 例 4-8】 month 类 型 的 日 期 检 出 器 的 使 用 。 
<form action-"http://localhost/hScss3/form.php" method-"post"- 
<input type-"month" name-"content"/- 
</form> 
运行 以 上 代码 ， 控 件 右 侧 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 只 显示 到 月 份 ， 而 不 
会 显示 日 期 。 输 入 年 份 和 月 份 之 后 ， 点 开 下 拉 按 钮 ， 面 板 将 显示 该 月 份 的 日 期 ， 并 呈 选 中 状 
态 ， 如 图 4-15 所 示 。 
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“GC fi D 12700.:8020/ch04/moi?*, = 


2017 年 西 月 xsv 提交 





NSGoP 
s*z2B 


20174058 ~ 
局 - 周 = 


? 
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Él 4-15 month 类 型 的 日 期 检 出 器 的 效果 


3. Week 类 型 
week 类 型 的 日 期 检 出 器 用 于 选取 年 份 和 该 年 的 哪儿 周 ， 如 2017 年 1 月 第 2 周 ， 选 择 后 
会 以 “2017 年 第 02 周 ”的 形式 显示 。 
【 例 4-9】 week 类 型 的 日 期 检 出 器 的 使 用 。 
<form action-"http:;//localhost/hScss3/form.php" method="post"> 
年 份 和 周 数 ，<input type-" week" name-"content"/- 
«input type="submit" value=" 提 交 " > 
</form> 
运行 代码 ， 控 件 显示 为 右 侧 带 有 微调 按钮 的 数字 输入 框 ， 输 入 或 微调 时 会 显示 年 份 和 周 
数 ， 而 不 会 显示 日 期 ,效果 如 图 4-16 所 示 。 当 选中 某 一 周 后 ， 点 开 下 拉 按 钮 ， 弹 出 的 面板 上 
该 周 的 日 期 呈 选 中 状态 。 


e 3 € fi [D 12700.1:8020/ch04/week.html 
年 份 和 周 数 ，[2017 年 第 c2 周 xz vf] 
2017 年 01 月 ~ Wae 
An 周 五 局 六 HB 
1 





26 27 28 














图 4-16 week 类 型 的 日 期 检 出 器 的 效果 


4. time 类 型 
time 类 型 的 日 期 检 出 器 用 于 选取 时 间 ， 具 体 到 小 时 和 分 钟 ， 如 11 时 11 分 ， 选 择 后 会 以 
2017-01 的 形式 显示 。 
【 例 4-10】 time 类 型 的 日 期 检 出 器 的 使 用 。 
<form action-"http;//localhost/hScss3/form php" method="post"> 
时 间 : <input type-"time" name="content"/> 
<input type="submit" value=" 提 交 " /> 
</form> 
运行 代码 ， 效 果 如 图 4-17 所 示 。 
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> CŒ fi Q 127.0.0.1:8020/ch04/time.h zz. 三 





时 间 ，|23: 59 x 高 | | 提交 
s 





图 4-17 time 类 型 的 日 期 检 出 器 的 效果 


除了 可 以 使 用 微调 按钮 之 外 ， 还 可 以 直接 输入 时 间 值 。 如 果 输 入 错误 的 时 间 格 式 并 单 击 
“提交 ”按钮 ， 在 Chrome 浏览 器 中 会 显示 值 无 效 的 提示 。 而 在 Opera 浏览 器 中 则 不 存在 这 样 
的 问题 ， 因 为 该 浏览 器 根本 不 允许 输入 错误 的 数值 ， 而 且 会 一 直 显 示 中 间 的 冒号 作为 小 时 和 
分 钟 的 间隔 符 。 

time 类 型 的 日 期 检 出 器 支持 使 用 一 些 属性 来 限定 时 间 的 大 小 范围 或 合法 的 时 间 间 隔 ， 如 
表 4-4 所 示 。 





表 4-4 time 类 型 的 属性 


属性 说 明 
max 规定 允许 的 最 大 值 
min 规定 允许 的 最 小 值 
step 规定 合法 的 时 间 间 隔 
value 规定 默认 值 





【 例 4-11】 在 time 类 型 的 日 期 检 出 器 中 限定 时 间 。 
<form action-"http://localhost/h5css3/form.php" method="post"> 
时 间 : <input type="time" name="content" step="3" value="15:21:03"/> 
<input type="submit" value=" Jf 42" /> 
</form> 
运行 以 上 代码 ,运行 结果 如 图 4-18 所 示 。 在 输入 框 中 出 现 设置 的 默认 值 ， 并 且 当 微调 按 
钮 时 ， 会 以 3 分 钟 为 单位 递增 和 递减 。 当 然 ， 还 可 以 使 用 min 和 max 属性 指定 时 间 的 范围 。 


D time 关 型 的 使 用 
Q fi D 1270.0.1:8020/ch04/t77 = 3 QC fi Q 12700.1:8020/ch04/17?| 三 


16:21:08 有 | 提交 | 时 间 ， [16:21:11 x 2] [8] 


D 请 锦 入 有 效 值 。 两 个 最 接近 的 有 效 
值 分 别 为 16:21:09 和 16:21:12。 








图 4-18 运行 效果 


date、month、week 类 型 的 日 期 检 出 器 也 支持 上 述 属性 。 
5. datetime 类 型 
datetme 类 型 的 日 期 检 出 器 用 于 选取 时 间 、 日 、 月 、 年 ， 其 中 时 间 为 UTC 时 间 。 


【 例 4-12】 datetime 类 型 的 日 期 检 出 器 的 使 用 。 
<form action="http://localhost/h5css3/form.php" method="post"> 
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时 间 : <input type="datetime" name="content"/> 
<input type="submit" value-" 提 交 " /> 
</form> 
运行 以 上 代码 , 效果 如 图 4-19 所 示 。 这 是 版 本 为 44.0.2403.157 的 Chrome 浏览 器 ， 从 效 
果 上 看 ， 似 乎 并 不 支持 datetime 类 型 的 日 期 检 出 器 ， 因 此 以 普通 的 text 类 型 替代 显示 。 大 家 
可 以 放 到 主流 的 不 同 浏览 器 中 进行 测试 ， 观 察 效果 。 





图 4-19 datetime 的 日 期 检 出 器 的 效果 
6. datetime-local 类 型 
datetime-local 类 型 的 日 期 检 出 器 用 于 选取 时 间 、 上 日、 月、 年 ， 其 中 时 间 为 本 地 时 间 。 
【 例 4-13】 datetime-local 类 型 的 日 期 检 出 器 的 使 用 。 

«form action-"http://localhost/h5css3/form.php" method="post"> 
时 间 : <input type-"datetime-local" name="content"/> 
<input type="submit" value=" 提 交 " /> 

</form> 

运行 以 上 代码 ， 效 果 如 图 4-20 所 示 。 
nse 
) datetime-local 尖 型 的 使 F x W 
Q fi D 127.0.0.1:8020/ch04/date 7». & 
时 间 ， ax) 


20175068] ~ AOIR 


[I 局 四 n A B 
$4 2 3$ 4 


8 9 17 1 
15 16 17 18 
23 24 25 
29 30 








图 4-20 datetime-local 类 型 的 日 期 检 出 器 效果 


4.3.5 search 类 型 


search 类 型 在 HTMLS 中 专门 用 于 搜索 。search 类 型 的 输入 元 素 提供 用 于 输入 搜索 关键 
词 的 文本 框 。 从 外 观 上 看 ，search 类 型 的 输入 元 素 和 普通 的 text 元 素 只 是 稍 有 区 别 。search 
类 型 提供 的 搜索 框 不 只 是 Google 或 百度 的 搜索 框 ， 而 是 任意 网 页 中 的 任意 一 个 搜索 框 。 
【 例 4-14】 search 类 型 的 使 用 。 
<form action="http://localhost/h5css3/form.php" method="post"> 
搜索 : <input type="search" name="content"/> 
<input type="submit" value=" 提 交 " /> 
</form> 
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运行 以 上 代码 , 效果 如 图 4-21 所 示 。 如 果 在 搜索 框 中 输入 要 搜索 的 关键 词 ， 在 搜索 框 右 
会 出 现 一 个 又 号 ， 单 击 该 按钮 可 以 清除 已 经 输入 的 内 容 。 








= æ CŒ |Q 127.0.0.1:8020/ch04/search 











搜索 ，| 百 度 一 下 x| | 提交 | 











图 4-21 search 类 型 的 应 用 


4.3.6 tel 类 型 


tel 类 型 的 输入 元 素 提 供 专门 用 于 输入 电话 号 码 的 文本 框 ， 它 并 不 限定 只 输入 数字 ， 因 为 
很 多 的 电话 号 码 还 包括 其 他 字符 ， 如 “+”、“-””“(”“)” 等 ， 比 如 086-010-62349797。 
【 例 4-15】 tel 类 型 的 输入 元 素 的 使 用 。 
<form action-"http://localhost/hScss3/form.php" method="post"> 
手机 号 码 : <input type-"tel" name-"content"/ 
<input type="submit" value=" 提 交 " /> 
</form> 
运行 以 上 代码 ， 效 果 如 图 4-22 所 示 。 所 有 浏览 器 都 支持 tel 类 型 的 输入 元 素 ， 因 为 它们 
都 会 将 其 作为 一 个 普通 的 文本 框 来 显示 ,HTML5 规 则 并 不 需要 浏览 器 执行 任何 特定 的 电话 号 
码 语法 或 以 任何 特别 的 方式 来 显示 电话 号 码 。 





> Q [D 127.0.0.1:8020/ch04/tel.htr 


SABE. (ENS E) 








图 4-22 tel 类 型 的 应 用 


4.3.7 color 类 型 


color 类 型 的 输入 元 素 提供 专门 用 于 设置 颜色 的 文本 框 。 通过 单 击 文本 框 , 可 以 快速 打开 
调 色 器 面板 ， 方 便 用 户 可 视 化 地 选择 一 种 颜色 。 
【 例 4-16】 color 类 型 的 输入 元 素 的 使 用 。 
<form action="http://localhost/h5css3/form.php" method-"post"- 
背景 色 : <input type="color" name="content"/> 
<input type="submit" value=" 提 交 " /> 
</form> 
运行 以 上 代码 ， 效 果 如 图 4-23 所 示 。 单 击 “ 选 择 颜 色 ” 按 钮 ， 弹 出 “颜色 ”面板 ， 其 中 
仅 提 供 了 20 多 种 常用 颜色 , 在 选取 之 后 会 在 下 方 显示 十 六 进 制 的 颜色 值 。 如 果 需 要 的 颜色 不 
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在 列表 中 ,可 以 单 击 “ 其 他 ”按钮 ， 此 时 会 打开 Windows 或 Mac OS 中 传统 的 “颜色 ”拾取 器 。 
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图 4-23 color 类 型 的 应 用 


44 ”新 增 的 输入 属性 


HTMLS 除了 增加 新 的 输入 类 型 外 ， 还 为 mput 元 素 增加 了 新 的 属性 ， 用 于 指定 输入 类 型 
的 行为 或 者 限制 输入 。 常 用 的 新 增 属性 有 form. fonnaction、 formmethod, formtarget, autofucs , 
required, labels, control, placeholder, list, pattem, selectionDirection, indeterminate, height 
和 width, min 和 max 等 。 下 面 介绍 这 些 新 增 的 属性 。 


4.4.1 form 属性 


在 HTML4 中 ， 表 单 内 的 元 素 一 定 要 放 在 表单 中 ， 也 就 是 把 表单 内 的 元 素 嵌 入 <fomm> 和 
</fonm> 标 签 中 ， 不 得 放 到 这 对 标签 之 外 的 其 他 地 方 。HTMLS5 打破 了 这 个 规定 ， 从 属于 表单 的 
元 素 可 以 放 在 页 面 的 任何 地 方 ， 只 要 在 该 元 素 内 指定 form 属性 的 值 为 表单 的 名 称 即 可 。 

【 例 4-17】 HTMLS 中 form 属性 的 使 用 。 

<form id="foo"> 

<input type="text" /> 
</form> 
<input type="submit" form="foo" /> 

第 一 个 input 元 素 从 属于 foo 表单 ， 被 书写 在 表单 内 部 ， 不 用 再 为 其 指定 fomm 属性 。 而 
第 二 个 input 元 素 也 从 属于 foo 表单 ， 但 它 写 在 foo 表单 之 外 ， 因 此 需要 为 其 指定 form 属性 ， 
使 其 指向 foo 表单 ， 表 示 从 属于 该 表单 。 

这 样 做 的 好 处 是 ， 在 需要 的 时 候 ， 可 以 更 方便 地 向 页 面 中 的 元 素 添加 样式 ， 因 为 它们 不 














第 4 章 HIMLS 表单 *59* 


是 分 散在 各 表单 之 内 。 
4.4.2 formaction 属性 





在 HIML4 中 ， 表 单 内 的 所 有 元 素 只 能 通过 表单 的 action 属性 统一 提交 到 另 一 个 页 面 ， 
在 HIMLS 中 可 以 为 诸如 <input type="image">, <input type="button">, <input type="submit"> 
等 的 提交 按钮 增加 不 同 的 formaction 属性 ， 使 得 在 单 击 不 同 的 按钮 时 可 以 将 表单 提交 到 不 同 
的 页 面 。 
【 例 4-18】 formaction 属性 的 使 用 。 
<form id-"foo" action=" http://localhost/h5css3/form.php"> 
<input type="submit" name-"al" value="value1" formaction="al.php" > 提交 到 al 
<input type="submit" name="a2" value="value2" formaction="a2.php" /> 提交 到 a2 
<input type="submit" name="a3" value-"value3" formaction="a3.php" /> 提交 到 a3 
<input type="submit" /> 
</form> 


4.4.8 formmethod 属性 








在 HTMLA 中 ， 一 个 表单 内 只 有 一 个 action 属性 ， 用 来 对 表单 内 的 所 有 元 素 统一 指定 提 
交 页 面 ， 所 以 每 个 表单 内 也 只 有 一 个 method 属性 用 来 统一 指定 提交 方法 。 在 HTMLS 中 , 可 
以 使 用 formmethod 属性 来 为 每 个 表单 元 素 分 别 指定 不 同 的 提交 方法 。 
【 例 4-19】 formmethod 属性 的 使 用 。 
«form id-"foo" action=" http://localhost/h5css3/form.php"> 
姓名 : <input type="text" name-"content" /><br/> 
<input type="submit" value="post 提交 " formmethod="post"/> 
<input type="submit" value-"get 提交 " formmethod-"get" /> 
</form> 


4.4.4 formenctype 属性 


在 HTMLA 中 ， 表 单 有 一 个 enctype 属性 ， 用 于 指定 表单 发 送 到 服务 器 之 前 应 该 如 何 对 
表单 内 容 进 行 编码 。enctype 属性 的 取 值 如 表 4-5 所 示 。 


表 4-5 表单 的 enctype 属性 的 取 值 

说 明 
在 发 送 前 编码 所 有 字符 ， 当 表单 元 素 的 action 属性 值 为 get 时 ， 浏 
览 器 用 x-www-form-urlencoded 编码 方式 把 表单 数据 转换 成 一 个 字 
符 串 ， 形 如 ?name=valuel&name2=value2... 然 后 把 这 个 字符 串 添加 
到 提交 的 目标 URL 地 址 之 后 ， 使 其 成 为 新 目标 URL 的 地 址 。 
该 属性 值 为 表单 元 素 的 enctype 属性 的 默认 值 
不 对 字符 编码 。 在 使 用 包含 文件 上 传 控件 的 元 素 时 ， 表 单 的 编码 方 
式 必须 是 这 种 
表单 数据 中 的 空格 被 转换 为 加 号 , 但 不 对 表单 数据 中 的 特殊 字符 进 
行 编码 





属性 值 





application/x-www-form-urlencoded 





multipart/form-data 





text/plain 








ft HIMLS 中 ， 可 以 使 用 formenctype 属性 对 表单 元 素 分 别 指定 不 同 的 编码 方式 。 
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【 例 4-20】 formenctype 属性 的 使 用 。 

<form id-"foo" action=" http://localhost/hScss3/form.php" method="post"> 
作者 : <input type="text" name="author" value="testvalue"/><br/> 
文件 : <input type="file" name-"files"/—- 
<input type="submit" value=" |- f£" formaction-" http;//localhost/hScss3/upload.php" 

formenctype- "multipart/form-data" /> 
<input type="submit" value=" 上传 " /> 
</form> 


4.45 formtarget 属性 


在 HTMLA 中 ， 表 单元 素 有 一 个 target 属性 ， 该 属性 用 于 指定 在 何 处 打开 表单 提交 后 所 
需 加 载 的 页 面 ， 可 以 使 用 的 属性 值 如 表 4-6 所 示 。 


表 4-6_ 表 单元 素 的 target 属性 的 取 值 





属性 值 说 明 
_blank 在 新 的 浏览 器 窗口 中 打开 
self target 属性 的 默认 值 ， 在 相同 的 框架 中 打开 
_parent 在 当前 框架 的 父 框架 中 打开 
_top 在 当前 浏览 器 窗口 中 打开 
framename 在 指定 的 框架 中 打开 


在 HTMLS 中 ， 可 以 对 多 个 提交 按钮 分 别 使 用 formtarget 属性 来 指定 提交 后 在 何 处 打开 
需要 加 载 的 页 面 。 
【 例 4-21】 formtarget 属性 的 使 用 。 
</form id-"testform" action=" http://localhost/hScss3/form.php"^ 
<input type="submit" name="al" value="al" formaction-"http://localhost/h5css3/al.php" 
formtarget="”self'/> 提 交 到 al 
<input type="submit" name="a2" value="a2" formaction-"http://localhost/h5css3/a2.php" 
formtarget="”blank"/> 提 交 到 a2 
<form> 
4.4.6 autofocus 属性 


为 文本 框 、 选 择 框 或 按钮 控件 加 上 autofocus 属性 ， 当 页 面 打开 时 ， 这 些 控件 将 自动 获得 
光标 焦点 。 目 前 做 到 这 一 点 需要 使 用 JavaScript， 壁 如 control.focus( )。autofocus 属性 的 使 月 
方法 如 下 : 

<input type="text" autofocus> 

一 个 页 面 上 只 能 有 一 个 控件 具有 autofocus 属性 。 从 实用 角度 来 说 , 建议 当 一 个 页 面 以 使 

用 某 个 控件 为 主要 目的 时 ， 才 对 该 控件 使 用 这 个 属性 ， 如 搜索 页 面 中 的 搜索 文本 框 。 


4.4.7 required 属性 


HTMLS 中 新 增 的 required 属性 可 以 应 用 到 大 多 数 输入 元 素 上 。 在 提交 时 ， 如 果 元 素 中 
内 容 为 空白 ， 则 不 允许 提交 ， 同 时 在 浏览 器 中 显示 提示 信息 ， 提 示 用 户 必须 输入 内 容 ， 如 图 
4-24 所 示 。 
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D required 导 9 全 用 x AEN 
© | Q 127.0.0.1:8020/ch04/required.html | 三 





作者 ， [Ty 
B 请 填写 此 字段 。 














图 4-24 required 属性 使 用 示例 


4.48 labels 属性 


在 HIML5 中 ， 为 所 有 可 使 用 标签 的 表单 元 素 ， 包 括 非 隐 藏 的 input JC, button 元 素 、 
select 元 素 、textarea 元 素 、meter 元 素 、output 元 素 、progress 元 素 以 及 keygen 元 素 ， 定 义 一 
个 labels 属性 ， 属 性 值 为 一 个 NodeList 对 象 ， 代 表 由 该 元 素 所 绑 定 的 标签 元 素 构成 的 集合 。 

以 下 是 labels 属性 的 一 个 使 用 示例 ， 该 例 显 示 一 个 文本 框 控 件 和 一 个 “验证 ”控件 ， 为 
文本 框 控件 绑 定 一 个 标签 元 素 ， 标 签 文字 为 “姓名 : ”。 当 用 户 不 在 文本 框 控件 中 输入 任何 内 
容 而 直接 单 击 “ 验 证 ”按钮 时 ， 为 动态 文本 框 控 件 添加 一 个 标签 元 素 ， 标 签 文字 为 “请 输入 
姓名 : ”。 当 用 户 在 文本 框 控 件 中 输入 内 容 后 单 击 “ 验 证 ”按钮 时 ， 该 标签 元 素 被 删除 。 

【 例 4-22] labels 属性 的 使 用 。 

«script type-"text/javascript" 
function Validate() ( 

varuser name = document.getElementById("user name"); 

var button] = document.getElementBylId("btnValidate"); 

var forml = document.getElementByld("foo"); 

if(user name.value.trim()—"")( 

if(user name.labels.length—1) ( 

var label = document.createElement("label"); 
label.setAttribute("for","user name"); 
forml insertBefore(label,button1); 
user_namelabels[1] innerHTML=" 请 输入 姓名 : "s 
user name.labels[]1].setAttribute("style","font-size: 9px:color red;"); 





5 
j 
else if(user name labels.length-1) ( 
forml.removeChild(user name.labels[1]); 
$ 
} 
</script> 
</head> 
<body> 
<form id="foo"> 
<label id-"label" for="user_ name"> 姓 名 : </label> 
<input id-"user name" /> 
<input type="button" id-"btnValidate" value=" 验 证 " onclick-"Validate()"/7- 
</form> 


</body> 
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在 浏览 器 中 打开 网 页 ， 显示 效果 如 图 4-25 所 示 。 当 用 户 不 在 文本 框 控件 中 输入 任何 内 容 
而 直接 单 击 “ 验 证 ”按钮 时 , 在 文本 框 控件 的 旁边 会 动态 添加 一 个 标签 元 素 , 标签 文字 为 “请 
输入 姓名 ”， 如 图 426 所 示 。 


D Iabels 尾 性 的 使 用 x UR 


c ANDA = > Q fi D 1270.01:8020/ch04/labels 7| & 
Q | D 127.0.0.1:8020/ch04/lab| 三 Hg Ô Westra D 清华 大 学 研究 生 招 .… 


站 [ 0 0 05 00 [wx] us mo 




















图 4-25 初始 效果 图 4-26 姓名 为 空 时 的 验证 效果 


当 在 文本 框 控 件 中 输入 内 容 后 ， 单 击 “ 验 证 ”按钮 ,“ 请 输入 姓名 ”标签 将 被 删除 ， 如 
图 4-27 所 示 。 


> CŒ fi D 127.0.0.1:8020/ch04/labels ?v | & 
| E 应 用 Ô WebGL 中 文 网 D NERERUERL. 


姓名 ， Jandy [EE] 





图 4-27 输入 姓名 后 提示 信息 被 删除 
44.9 control 属性 


1E HTMLS 中 ,可 以 在 标签 内 部 放置 一 个 表单 元 素 ， 并 且 通 过 该 标签 的 control 属性 来 访 
问 该 表单 元 素 。 
例如 ， 在 下 面 的 示例 中 ， 在 标签 内 部 放置 一 个 用 于 输入 邮编 的 文本 框 控件 ， 当 用 户 单 击 
页 面 上 的 “设置 默认 值 ”按钮 时 ， 通 过 标签 的 control 属性 访问 该 文本 框 控 件 ， 并 且 将 该 文本 
框 控件 的 内 容 设置 为 “100084”。 
【 例 4-23】 标签 的 control 属性 的 使 用 。 
<head> 
«meta charset="UTF-8"> 
<title> 标 签 的 control 属性 的 使 用 </tide> 
<script type="text/javascript"> 
function setValue() ( 
var labell = document.getElementByld("label"): 
var textbox1 = labell.control; 
textboxl.value = "100084": 


S439: HIMLS 表单 63s 


<label id="label"> 

邮政 编码 : 

<input id-"text zip" maxlength="6"> 
<small> 请 输入 6 位 数字 </small> 
</label> 

</input> 

<input type="button" value=" 设 置 默 认 值 " onclick-"setValue()" /> 

</form> 
</body> 
在 浏览 器 中 打开 示例 页 面 ， 单 击 “ 设 置 默认 值 ” 按钮 ， 在 文本 框 控件 中 会 显示 “100084” 
文字 ， 如 图 428 所 示 。 


^ 标签 的 control 怀 性 的 使 用 x 人 
Q fi |51270.0.1:8020/ch04/control.htm ?z. = 


邮政 编码 |100084 请 输入 6 位 数字 | 设置 默认 值 








图 4-28 标签 的 control 属性 的 使 用 效果 


4.4.10 placeholder 属性 
Placeholder 属性 的 值 是 指 当 文本 框 处 于 未 输入 状态 时 显示 的 输入 提示 。 使 用 方法 如 下 : 
<input type="text" placeholder=" 请 输入 内 容 " /> 
如 图 4-29 所 示 , 当 文 本 框 处 于 未 输入 状态 且 未 获取 光标 焦点 时 , 模糊 显示 输入 提示 文字 。 


O 127.0.0.1:8020/ch04/placeholderhtml | S 


LES 





图 4-29 placeholder 属性 的 使 用 效果 


4.4.11 list 属性 


在 HIMLS 中 , 为 单行 文本 框 增加 了 一 个 list 属性 ,该 属性 的 值 来 源 于 某 个 datalist 元 素 。 
datalist 元 素 在 前 面 已 经 介绍 过 ， 这 个 元 素 类 似 于 select 元 素 ， 但 是 当 用 户 想 要 设置 的 值 不 在 


输入 的 方式 显示 。 为 了 避免 在 不 支持 datalist 元 素 的 浏览 器 中 出 现 显示 错误 ， 可 以 用 CSS 将 
其 设置 为 不 显示 。 
【 例 4-24】 list 属性 的 使 用 。 
<body> 
text:-input type="text" name-"greeting" list-"greetings" /> 
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<!-- 使 用 style="display:none:" 将 datalist 元 素 设置 为 不 显示 -> 

<datalist id="greetings" style="display: none;"> 
<option value="Good Moming"> 早 上 好 </option> 
<option value="Good Aftemoon"> 中 午 好 </option> 
«option value-"Good Night"> 晚 上 好 </option> 

</datalist> 

</body> 
运行 以 上 代码 ， 效 果 如 图 4-30 所 示 。 


> Q fi D 1270..1:8020/ch04/list.html 


text: v 


Good Moming — 9:5 
Good Aftemoon +7 


Good Night a 





图 4-30 list 属性 的 使 用 效果 


4.4.12 文本 框 的 pattern 属性 


在 HTML5 中 ， 对 input 元 素 使 用 pattem 属性 ， 并 且 将 属性 值 设置 为 某 个 格式 的 正则 表 
达 式 时 ， 在 提交 时 会 对 这 些 进行 检查 ， 检 查 其 内 容 是 否 符合 给 定格 式 。 当 输入 的 内 容 不 符合 
给 定格 式 时 ， 不 允许 提交 ， 同 时 在 浏览 器 中 显示 提示 信息 ， 提 示 输 入 的 内 容 必须 符合 给 定格 
式 。 璧 如， 下 面 的 代码 要 求 输入 内 容 为 1 个 数字 与 3 个 大 写字 母 : 
<form> 
请 输入 内 容 : <input type="text" pattem-"[0-9][A-Z] (3) " name="content" /> 
<input type="submit" /> 
</form> 
运行 以 上 代码 ， 当 输入 的 内 容 不 符合 给 定格 式 时 ， 提 交 时 就 会 弹出 提示 信息 ， 效 果 如 
图 4-31 所 示 。 


D 127.0.0.1:8020/ch04/ps: x We 


€ > QC fi O 12700.18020/ch04/pattern.htm vy | = 








asa 提交 | 
Hi 请 与 所 请 求 的 格式 保持 一 致 














图 4-31 输入 内 容 不 符合 给 定 规则 时 的 提示 信息 


4.4.13 selectionDirection 属性 


针对 input 元 素 与 textarea 元 素 ，HIML5 增加 了 selectionDirection 属性 。 当 用 户 在 这 两 
个 元 素 中 用 鼠标 选取 部 分 文字 时 ， 可 以 使 用 该 属性 来 获取 选取 方向 。 当 正 向 选取 文字 时 ， 该 
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属性 值 为 forward， 当 反 向 选取 文字 时 ， 该 属性 值 为 backward。 当 没有 选取 任何 文字 时 ， 该 
属性 默认 为 forward。 
【 例 4-25】 selectionDirection 属性 的 使 用 。 
<head> 
«meta charset="UTF-8"> 
<title>selectionDirection 属性 的 使 用 </title> 
«script type="text/javascript"> 
function AlertSelectionDirection() ( 
var control = document.forms[0]['content]: 
var direction = control.selectionDirection: 
alert(direction); 











} 
</script> 
</head> 
<body> 
<form> 
<input type="text" name="content" /> 
<input type="button" value=" jit; onclick-"AlertSelectionDirection()" /> 
</form> 
</body> 
运行 代码 ， 单 击 “ 点 击 我 ”按钮 ， 弹 出 信息 提示 框 ， 内 容 为 文本 框 的 selectionDirection 
属性 值 ， 如 图 4-32 所 示 。 


-5 
selectionDirection 硅 性 3 x 
Cfi 127.0.0.1:8020/ch04/selectionDir v? 三 
aaaa 点 击 我 | 
127.0.0.1:8020 上 的 网 页 显示 : x 
forward 
[= | 


图 4-32. selectionDirection 属性 的 使 用 效果 


4.4.14 ” 复 选 框 的 indeterminate 属性 


对 于 复 选 框 来 说 ， 过 去 只 有 选中 和 未 选中 两 种 状态 。 在 HIML5 中 ， 可 以 在 JavaScript 代 
码 中 对 checkbox 元 素 使 用 indeterminate 属性 , 以 说 明 复 选 框 处 于 “尚未 明确 是 否 选中 ”的 状态 。 
在 JavaScript 脚本 代码 中 ， 使 用 布尔 类 型 的 值 对 indeterminate 属性 进行 赋值 。 当 属性 值 
J true 时 ， 浏 览 器 中 的 复 选 框 将 显示 为 不 明 状 态 。 
【 例 4-26】 indeteminate 属性 的 使 用 。 
<input type="checkbox" indeterminate id-"checkbox1" /-indeterminate 属性 测试 
«script type="text/javascript"> 
var checkbox1 = document.getElementById("checkbox1"): 
// 把 indeterminate 属性 设置 为 tme 
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checkboxl indeterminate = true; 
script 

TEEXEHE indeterminate 属性 设置 为 true 的 效果 如 图 4-33 所 示 。 需 要 注意 的 是 ， 
indeterminate 和 checked 是 两 种 不 同 的 属性 。 如 果 只 考虑 把 indeterminate 和 checked 属性 结合 
使 用 ， 可 能 会 认为 复 选 框 具有 “两 个 属性 值 均 为 false”、“ 两 个 属性 值 均 为 tue”、 
*checked-true, indeterminate-false" fil *checked-false. indeterminate-true" ix 4 种 状态 ， 
但 实际 上 复 选 框 只 具有 选中 、 非 选中 、 不 明 3 种 状态 。 
因此 ， 在 JavaScript 代码 中 对 复 选 框 的 状态 进行 判断 时 ， 应 该 先 判断 复 选 框 的 
indeterminate 属性 值 ， 然 后 判断 复 选 框 的 checked 属性 值 ， 代 码 如 下 : 

// 复 选 框 处 于 不 明 状态 





这 checkbox.checked){ 
// 复 选 框 处 于 选中 状态 
Jelse{ 
// 复 选 框 处 于 非 选 中 状态 


D indeterminate 尾 性 x V3 
© | (5 127.0.0.1:8020/ch04/in 


7 indeterminate 属 性 测试 





图 4.33 1E indeterminate 属性 设置 为 tue 的 效果 
4.4.15 height 与 width 属性 


针对 类 型 为 image 的 input 元 素 ，HIMLS 新 增 了 两 个 属性 : height 和 width. Height 属性 
于 指定 图 片 按钮 中 的 图 片 的 高 度 ，width 属性 用 于 指定 图 片 按钮 中 的 图 片 的 宽度 。 
【 例 4-27】 image 类 型 的 input 元 素 的 使 用 。 
<form action-"http://localhost/h5css3/form.php" method="post"> 
姓名 : <input type="text" name-"content" /> 
<input type="image" src-"img/timg jpg" alt=" 编 辑 " width="23" height="23" /> 
</form> 


运行 代码 ， 效 果 如 图 4-34 所 示 。 

















D image 尖 型 的 input 元 幸 x AN 
- > Q [D 12700.1:8020/ch04/im 





se | 8 





图 4-34 image 类 型 的 input 元 素 的 使 用 效果 
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4.4.16 maxlength 和 wrap 属性 


HTMLS 7j textarea 元 素 新 增 了 maxlength 和 wrap 属性 。 
e maxlength 属性 : 使 用 整 型 数值 进行 设置 ， 用 于 限定 textarea 元 素 中 可 以 输入 的 文字 
个 数 。 
e wrap 属性 : 可 指定 属性 值 为 soft 和 hard。 当 属性 值 为 hard 时 ， 如 果 在 textarea 元 素 
中 输入 的 文字 个 数 , 因 超 出 使 用 textarea 元 素 的 cols 属性 所 限定 的 每 行 中 可 显示 的 文 
字 个 数 而 导致 文字 换行 时 ， 提 交 表 单 时 会 在 换行 处 加 入 换行 标志 。 当 属性 值 为 soft 
时 不 加 换行 标志 。 当 设 定 wrap 属性 值 为 hard 时 ， 必 须 指 定 cols 属性 值 。 
【 例 4-28】 textarea 元 素 的 maxlength 和 wrap 属性 的 使 用 。 
<form action="http://localhost/hScss3/server.php" method="post"> 
<textarea name="content" maxlength="100" rows="3" wrap="hard" cols="3"></textarea> 
<input type="submit" value=" 提 交 " /> 
</form> 
提交 的 目标 文件 serverphp 中 的 代码 如 下 所 示 : 
<?php 
$content = $ POST['content']: 
echo "<pre>".$content."<pre>"; 
TES 
运行 程序 ， 在 文本 框 中 输入 “1234567890”， 效 果 如 图 4-35 所 示 。 单 击 “ 提 交 ” 按 钮 ， 
当 textarea 元 素 的 wrap 属性 值 为 hard 时 ，serverphp 输出 的 文字 中 具有 换行 符 ， 如 图 4-36 所 
示 。 修 改 textarea 元 素 的 wrap 属性 值 为 soft， 然 后 单 击 “ 提 交 ” 按 钮 ， 表 单 提交 后 serverphp 
输出 的 文字 中 不 含 换行 符 ， 如 图 4-37 所 示 。 





D textarea x x *) localhost/h5 x 


QC fi 口 127.0.0.18( 安 三 € C fi D localhost/h ?: 三 


12348 1234561890 
61890 
| 提交 | 





图 4-35 输入 内 容 图 4-36 wrap 属性 为 hard 时 的 效果 图 4-37 wrap 属性 为 soft 时 的 效果 


4.5 表单 验证 


表单 验证 是 一 套 系统 ， 它 为 终端 用 户 检测 无 效 的 数据 并 标记 这 些 错误 ， 是 对 用 户 体验 的 
优化 ， 让 Web 应 用 更 快 地 抛 出 错误 ， 但 它 仍 不 能 取代 服务 器 端的 验证 ， 重 要 数据 仍 要 依赖 服 
务 器 端的 验证 ， 因 为 前 端 验 证 是 可 以 绕 过 的 。 


4.5.1 自动 验证 


在 HIMLS 中 ， 通 过 对 元 素 使 用 属性 的 方法 ， 可 以 实现 在 提交 表单 时 执行 的 自动 验证 功 
能 。 例 如 以 下 的 例子 ， 在 提交 表单 时 自动 验证 输入 的 内 容 是 否 为 数字 ， 如 果 不 是 数字 ， 就 会 
显示 错误 提示 。 
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【 例 4-29】 自动 验证 输入 的 内 容 是 否 为 数字 。 
<head> 
<meta charset="UTF-8"> 
<title> 自 动 验证 输入 的 内 容 是 否 为 数字 </title> 
</head> 
<body> 
<form method="post"> 
<input name="text1" type="text" required pattern="^\w.*$"/> 
<input type="submit" /> 
</form> 


</body> 
4.5.2 ”取消 验证 


当 表 单 很 大 时 ， 有 可 能 需要 把 填 好 的 一 部 分 表单 先 提交 一 下 ， 但 不 想 这 个 时 候 对 表单 中 
所 有 元 素 内 容 的 有 效 性 进行 检查 。 在 这 种 情况 下 ， 可 以 暂时 取消 表单 验证 。 

有 两 种 方法 可 以 取消 表单 验证 ， 第 一 种 方法 是 利用 form 元 素 的 novalidate 属性 来 关闭 整 
个 表单 验证 。 当 整个 表单 的 余下 部 分 需要 验证 的 内 容 比 较 多 且 想 先 提 交 表 单 的 一 部 分 内 容 时 ， 
可 以 使 用 这 种 方法 。 先 把 novalidate 属性 设置 为 tue， 关 闭 表 单 验证 ， 提 交 填 写 好 的 内 容 ， 然 
后 在 提交 余下 部 分 时 再 把 novalidate 属性 设置 为 false， 打 开 表 单 验证 ， 提 交 余下 内 容 。 

男 一 种 方法 是 ， 利 用 input 或 submit 元 素 的 formnovalidate 属性 ， 利 用 input 元 素 的 
formnovalidate 属性 可 以 让 表单 验证 对 单个 input 元 素 失效 。 如 果 对 submit 按钮 使 用 这 个 属性 ， 
那么 当 单 击 该 按钮 时 ， 相 当 于 利用 了 form 元 素 的 novalidaste 属性 ， 整 个 表单 验证 将 失败 。 

综 上 可 知 ， 可 以 对 表单 实现 假 提 交 的 效果 。 例 如 ， 在 页 面 上 显示 一 个 提交 按钮 ， 不 带 表 
单 验证 ， 单 击 该 按钮 提交 表单 时 不 进行 数据 有 效 性 检查 ， 提 交 时 临时 保存 到 文件 中 或 其 他 地 
方 ; 再 显示 男 一 个 提交 按钮 ， 单 击 这 个 按钮 对 表单 进行 提交 后 , 将 表单 数据 保存 到 数据 库 中 。 


4.5.3” 显 式 验 证 


除了 为 input 元 素 添加 属性 ， 进 行 元素 内 容 有 效 性 的 自动 验证 外 ， 在 HTMLS H, form 
和 input 元 素 还 有 一 个 checkValidity 方法 , 调用 该 方法 , 可 以 显 式 地 对 表单 内 所 有 元 素 内 容 或 
单个 元 素 内 容 进行 有 效 性 验证 。checkValidity 方法 将 验证 结果 用 布尔 值 的 形式 返回 。 
【 例 4-30】 checkValidity 方法 的 使 用 。 
<script type-"text/javascript"-- 
function check()( 
var emaill = document.getElementBylId("email1"); 


jelse if(!emaill.checkValidity()) ( 
alert(" 输 入 正确 的 e-mail 地 址 "); 
retum false; 

jelset 
alert("e-mail 地 址 正确 "): 

h 
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> 
<script> 
</head> 
<body> 
<form id-"foo" onsubmit-"retum check();" novalidate="true"> 
<label for="emaill">Email</label> 
<input name-"email" id-"emaill" type="email"/><br /> 
<input type="submit" /> 
</form> 





需要 注意 的 是 ,在 HTMLS H, form 和 input 元 素 还 有 一 个 validity 属性 ， 该 属性 返回 的 
是 一 个 ValidityState 对 象 。 该 对 象 具 有 很 多 属性 ， 其 中 最 基本 的 是 valid 属性 ， 表 示 表 单 内 所 
有 元 素 内 容 是 否 有 效 或 单个 input 元 素 内 容 是 否 有 效 。 


4.6 本 章 小 结 


本 章 主要 介绍 了 HTMLS5 在 表单 方面 新 增 的 功能 。 表 单 在 网 页 设计 中 起 到 数据 收集 的 作 
用 ， 这 也 是 客户 端 向 服务 器 端 提供 数据 的 唯一 方法 。 
HTMLS 在 表单 方面 增加 了 许多 功能 ， 如 增加 输入 类 型 、 表 单元 素 、 表 单 属 性 和 输入 属 


性 等 。 这 些 属性 主要 在 总 结 以 往 表单 常用 操作 的 基础 上 提炼 而 来 ， 以 使 前 端 设计 人 员 的 工作 
更 加 高 效 。 


本 章 主要 介绍 了 HIMLS 表单 中 新 增 的 表单 属性 ， 包 括 autocomplete 和 novalidate 属性 ; 
新 增 的 表单 元 素 ， 包 括 datalist、keygen 和 output 元 素 ; 新 增 的 输入 类 型 ， 包 括 email, url. 
number, Date Pickers, search, tel, color 等 ; 新 增 的 输入 属性 ,包括 form, formaction, formmethod , 
formenctype. formtarget, autofocus, required, labels, control. placeholder. list, pattern 等 。 
另外 还 介绍 了 HIMLS 新 增 的 表单 验证 操作 ， 包 括 自动 验证 、 取 消 验证 和 显 式 验证 。 


47 思考 和 练习 


1. HTMLS 新 增 的 表单 属性 有 哪些 ? 简 述 其 功能 。 

2. HTMLS 新 增 的 表单 元 素 有 哪些 ? 简 述 其 功能 。 

3. HIML5 新 增 的 输入 类 型 有 哪些 ? 简 述 这 些 类 型 的 使 用 。 

4. HTMLS 新 增 的 输入 属性 有 哪些 ? 简 述 这 些 属性 的 使 用 。 

5. 创建 一 个 表单 ， 里 面 有 一 个 用 户 名 输入 框 ， 用 户 名 必须 是 6~8 个 数字 或 英文 大 小 写 ， 
其 他 字符 都 非法 。 请 实现 此 功能 。 
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canvas 是 HTMLS 新 增 的 一 个 元 素 ， 也 可 以 说 是 绘画 接口 ， 通 过 这 个 接口 ， 用 户 可 以 在 
Web 中 绘制 图 形 。 虽然 以 前 也 有 基于 XML 的 绘图 技术 ， 如 VML 和 SVG 等 ,但 canvas 是 基 
于 像素 进行 绘制 ， 开 发 者 通过 JavaScript 脚本 可 以 在 网 页 中 绘图 。 

绘制 图 形 时 ， 首 先 在 页 面 上 放置 一 个 canvas 元 素 ， 就 相当 于 在 页 面 上 放置 了 一 块 画布 ， 
可 以 在 这 块 画布 中 进行 图 形 绘制 ， 但 并 不 是 用 鼠标 画图 。 实 际 上 ，canvas 只 是 一 块 无 色 透 明 
的 区 域 ， 只 是 一 个 JavaScript API， 需 要 通过 JavaScript 编写 绘制 图 形 的 脚本 。 本 章 就 来 介绍 
canvas 元 素 的 使 用 。 

本 章 学 习 目 标 : 

e 理解 与 canvas 元 素 相关 的 基础 知识 ， 包 括 添加 canvas 元 素 、 检 测 浏览 器 是 否 支 持 
canvas 元 素 、 使 用 canvas 元 素 绘制 图 形 的 基本 方法 、 与 绘制 图 形 相关 的 坐标 系 
使 用 canvas 元 素 绘制 简单 图 形 ， 包 括 直线 、 矩 形 、 圆 形 、 三 角形 、 画 布 、 路 径 等 
使 用 canvas 元 素 绘制 贝 塞 尔 曲线 ， 包 括 二 次 和 三 次 贝 塞 尔 曲线 
使 用 canvas 元 素 绘制 变形 图 形 ， 包 括 移动 、 旋 转 、 缩 放 、 变 换 等 操作 
使 用 canvas 元 素 添 加 丰富 的 图 形 效果 ， 包 括 渐变 、 图 案 、 透 明度 、 阴 影 等 效果 
使 用 canvas 元 素 对 图 像 进行 处 理 ， 包 括 图 像 的 绘制 、 平 铺 、 剪 裁 操作 以 及 像素 处 理 
使 用 canvas 元 素 对 图 形 /图 像 进行 组 合 和 混合 操作 
使 用 canvas 元 素 将 文字 绘制 到 Web 上 
使 用 canvas 绘图 时 状态 的 保存 与 恢复 ， 将 绘制 的 图 形 /图 像 保存 为 本 地 文件 等 


5.1 canvas 元素 基础 


canvas 元 素 能 够 在 网 页 中 创建 一 块 矩 形 区 域 ， 这 块 矩 形 区 域 称 为 画布 ， 在 其 中 可 以 绘制 
各 种 图 形 。 


5.1.1 添加 canvas 元 素 








在 HTML 页 面 中 添加 canvas 元 素 的 方法 和 添加 其 他 的 元 素 一 样 ， 代 码 如 下 : 
«canvas id-"canvas1" width="400" height="300"></canvas> 
以 上 代码 创建 一 个 宽 400 像素 、 高 300 像素 的 canvas 对 象 。 运行 代码 ， 页 面 上 什么 都 没 
显示 。 在 页 面 上 用 鼠标 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “审查 元 素 ” 命 令 ， 打 开 浏 览 器 的 元 
素 窗口 ， 把 鼠标 指针 指向 canvas] 元 素 ， 可 以 看 到 一 个 矩形 区 域 ， 如 图 5-1 所 示 。 
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图 5-1 canvas 对 象 在 Web 中 的 显示 效果 


5.12 ”检测 浏览 器 是 否 支持 


并 不 是 所 有 的 浏览 器 都 支持 canvas 元 素 ， 因 此 ， 在 使 用 时 需要 先进 行 检测 。 检 测 的 方法 
有 两 种 : 一 种 是 为 不 支持 canvas 元 素 的 浏览 器 提供 奉 代 显 示 的 内 容 ; 另 一 种 是 使 用 JavaScript 
代码 进行 检测 。 
1. 提供 替代 显示 的 内 容 
这 种 方法 就 是 直接 在 canvas 元 素 内 插入 替代 内 容 ， 不 支持 canvas 元 素 的 浏览 器 会 忽略 
canvas 元 素 而 直接 显示 替代 内 容 ， 支 持 canvas 元 素 的 浏览 器 则 正常 泻 染 ， 代 码 如 下 ; 
«canvas id="canvas1" width-"400" height="300"> 
您 的 浏览 器 不 支持 HIMLS canvas 标签 。 
</canvas> 
2. 使 用 JavaScript 代码 进行 检测 
这 种 方法 是 使 用 JavaScript 脚本 来 检测 浏览 器 是 否 支 持 canvas 元 素 ， 方 法 是 判断 
getContext 函数 是 否 存 在 ， 代 码 如 下 : 
<body> 
«canvas id-"canvas1" width="400" height="300"> 
</canvas> 
<script type="text/javascript"> 
var canvas] = document.getElementById("canvas1"); 
if(canvasl.getContext) ( 
alert(" 您 的 浏览 器 支持 canvas 元 素 ! "); 
jelset 
alert(" 您 的 浏览 器 不 支持 canvas 元 素 ! "); 





j 
<script> 
</body> 
5.1.3 ”使 用 canvas 元 素 绘制 图 形 


canvas 元 素 本 身 并 不 能 实现 图 形 绘制 功能 ， 绘 制图 形 的 工作 需要 由 JavaScript 来 完成 。 
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使 用 JavaScript 可 以 在 canvas 元 素 内 部 添加 线条 、 图 片 和 文字 ， 也 可 以 在 其 中 绘画 ， 还 能 够 
加 入 高 级 动画 。 下 面 首先 来 看 一 个 使 用 canvas 元 素 绘制 图 形 的 例子 。 
【 例 5-1】 使 用 canvas 元 素 绘制 图 形 。 





<head> 
«meta charset="utf-8"> 
<title>canvas 元 素 示例 </title> 
<script type-"text/javascript" charset="gb2312"> 
function draw()( 
var c = document.getElementBylId("canvas1"); 
if(c—null)retum false; 
var context = c.getContext('2d'); 
context.fillStyle="#00FF00"; 
context.fillRect(50,50,100,100); 
) 
</script> 
</head> 
<body onload="draw0"> 


«canvas id-"canvas]" width="400" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 
</body> 
运行 以 上 程序 ， 效 果 如 图 5-2 所 示 。 


canvas 元 素 示例 
C fi 127.0.0.1:8020/ch0s/s = 





图 5-2 程序 运行 效果 


从 以 上 绘制 图 形 的 过 程 可 知 ， 使 用 canvas 元 素 绘制 图 形 的 具体 步骤 如 下 : 
(1) 在 页 面 中 添加 canvas 元 素 ， 必 须 定义 canvas 元 素 的 id 属性 值 ， 以 便 绘制 时 调用 : 
«canvas id="canvas1" width="400" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 
(2) 通过 id 找到 canvas 元 素 : 
var c = document.getElementById("canvas1"); 
(3) 通过 canvas 元 素 的 getContext 方法 获取 其 上 下 文 , 即 创建 Context 对 象 , 获取 可 绘制 
图 形 的 2D 环境 : 
var context = c.getContext('2d'); 
这 里 的 getContext(2d) 返 回 一 个 内 建 的 HTMLS 对 象 ， 使 用 该 对 象 可 以 在 canvas 元 素 中 


绘制 图 形 。 目 
添加 图 像 。 
(4) 使 
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前 2D 画布 上 可 以 使 用 大 多 数 绘制 方法 ， 例 如 绘制 路 径 、 甜 形 、 


JavaScript 脚本 进行 图 形 绘制 : 


context.fillStyle="#00FF00"; 
context.fillRect(50,50,100,100); 
在 这 两 行 代码 中 ，fHilStyle 将 要 绘制 的 矩形 的 填充 颜色 定义 为 粉红 色 ， 而 fillRect 则 指定 


要 绘制 的 矩形 的 位 置 和 长 宽 。 图形 的 位 置 日 
度 值 决 定 。 在 本 例 中 ， 坐 标 值 为 (50.50)， 长 宽 为 (100,100)。 根 据 这 些 数值 ， 绿 


画布 中 央 。 





5.1.4 canvas 坐标 系 


在 canvas 元 素 中 绘制 图 形 时 ， 需 要 为 图 形 指定 摆 放 位 置 。fillRect(50,50,100,100) 的 前 两 
个 参数 用 来 指定 所 绘制 矩形 的 x 轴 和 y 轴 坐 标 值 。 在 canvas 坐标 系 中 ， 坐 标 原点 (0.0) 位 于 
canvas 元 素 的 左上 角 ，x 轴 水 平 向 右 延 伸 ，y 轴 向 下 延伸 ， 如 图 5-3 所 示 。 


X 轴 


(50,50) 
Q 








图 5-3 canvas 坐标 系 
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73. 


圆 形 、 字 符 和 








绘制 简单 图 形 是 绘制 复杂 图 形 的 基础 。canvas 元 素 能 够 实现 最 简单 的 图 形 绘制 


来 介绍 如 何 使 用 canvas 和 JavaScript 实现 最 简单 的 图 形 绘制 ， 包 括 直 线 、 矩 形 、 略 


形 的 绘制 和 路 径 绘图 。 
5.2.1 绘制 直线 


在 canvas 上 绘制 简单 直线 ， 主 要 用 到 3 个 方法 : moveTo. lineTo 和 stroke。 如 果 要 设置 
直线 端点 的 样子 ， 可 以 使 用 lineCap 属性 指定 。 


【 例 5-2】 


绘制 直线 。 


<head> 


«meta charset="utf-8"> 

<title>canvas- 绘 制 直线 </title> 

«script type="text/javascript" charset="gb2312"> 
function draw()( 


日 前 面 的 canvas 坐标 决定 ， 尺 寸 由 后 面 的 宽度 和 高 
色 和 矩形 出 现在 


， 本 节 就 











形 、 三 角 
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var c = document getElementBylId("canvas1"); 
if(c—null)retum false: 

var context = c.getContext(2d"); 
context.strokeStyle=#000'; 
context.lineWidth=10; 
context.lineCap='square'; 

context.beginPath(): 

context.moveTo(20.0); 

context.lineTo(100,0); 


</head> 
<body onload-"draw()"- 
«canvas id-"canvas]" width="400" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 
</body> 
运行 以 上 代码 ， 效 果 如 图 5-4 所 示 。 





图 5-4 直线 效果 


下 面 说 明 以 上 绘制 直线 的 脚本 中 用 到 的 一 些 方法 和 属性 : 

1) 每 个 canvas 上 下 文 仅 有 一 个 当前 Path。 

2) 通过 beginPath 方法 开始 一 个 Path， 通 过 closePath 方法 结束 一 个 Path。 

3) Path 有 两 个 基本 的 方法 : moveTo 和 lineTo。 

4) lineCap 有 butt, round 和 square 三 个 属性 。 其 中 : butt( 默 认 )， 边 缘 是 平 的 ， 与 当前 线 
条 垂直 ; round， 边 缘 是 半圆 ， 该 半圆 的 直径 是 当前 线条 的 长 度 ，square， 边 缘 是 长 方形 ， 该 
长 方形 的 长 是 当前 线条 的 宽 ， 宽 是 当前 线条 宽度 的 一 半 。 

5) lineWidth 属性 用 来 设置 线条 的 宽度 。 

6) strokeStyle 属性 定义 当前 线条 的 颜色 及 样式 。 


522 ”绘制 矩形 


绘制 矩形 时 , 需要 用 到 fillStyle 属性 和 fillRect 方法 , 还 可 以 使 用 strokeStyle 和 strokeRect 
方法 。 其 中 ，filStyle 属性 用 于 指定 填充 颜色 ; fillRect 方法 用 于 以 指定 的 填充 颜色 绘制 一 个 
矩形 ;， strokeStyle 方法 指定 边框 线 的 颜色 : strokeRect 方法 以 指定 的 颜色 绘制 矩形 轮廓 。 
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[515-3] 绘制 矩形 。 
«script type-"text/javascript" charset="gb2312"> 
function draw()( 
var c = document.getElementByld("canvas1"); 
if(c—null)retum false: 
var context = c.getContext( 2d"); 
context.beginPath(); 
context.fillStyle-"£F00": 
context.fillRect(0.0.200.100); 
context.beginPath(); 
context.strokeStyle-"4000": 
context.line Width-3: 
context.strokeRect(200,0,200,100); 
context.closePath();* 可 选 步骤 ， 关 闭 绘制 的 路 径 */ 
} 
</script> 
</head> 
<body onload="drawO"> 
<canvas id="canvas1" width="400" height="300"> 
您 的 浏览 器 不 支持 HTML5 canvas 标签 。 
</canvas> 
</body> 
运行 以 上 程序 ， 效 果 如 图 5-5 所 示 。 程 序 首先 通过 context fillStyle="#F00" it EHA (5. 
村 00， 然 后 通过 context.fillRect(0.0,200,100) 7713: EA&F00 为 填充 色 ， 以 坐标 (0,0) 为 起 点 ， 绘 制 
-个 宽 200 像素 、 高 100 像素 的 矩形 ; 接着 通过 context.strokeStyle="#000" 设 置 边框 颜色 #000， 
然后 通过 context.strokeRect(200,0,200,100) 方 法 以 "#000" 为 边框 色 ， 以 (200,0) 为 起 点 ， 绘 制 一 
个 宽 200 像素 ， 高 100 像素 的 无 填充 色 的 矩形 。 


canvas- 绘 制 延 形 


Cfi 127.0.0.1:8020/ch05/5-3.html 





图 5-5 绘制 矩形 


5.2.3 ”绘制 弧 线 与 圆 形 
HTMLS 提供 了 专门 用 于 绘制 圆 形 或 弧 线 的 arc 和 arcTo 方法 。 





arc 方法 的 使 用 格式 如 下 : 
5 
在 canvas 画布 上 绘制 以 坐标 点 (xy) 为 圆心 、 半 径 为 radius 的 贺 上 的 一 段 弧 线 。 这 段 弧 线 





的 起 始 弧度 是 startRad， 结 束 弧 度 是 endRad。 这 里 的 弧度 以 x 轴 正 方向 (时 钟 三 点 钟 ) 为 基准 ， 


。76。 HTML5+CSS3 网 页 设计 基础 教程 








进行 顺 时 针 旋转 的 角度 来 计算 。anticlockwise 表示 以 逆 时 针 方 向 还 是 顺 时 针 方向 开始 绘制 ， 
WRA tue, MKR Eh WRA false, MKII E. Z anticlockwise 是 可 选 的 ， 默 
认为 false， 即 顺 时针 ， 如 图 5-6 所 示 。 

(时 钟 12 点 钟 ) 

B zc 中 的 弧度 是 指 从 x 

ncm SJ re, AH 
顺 时 针 方 向 旋转 所 得 
的 弧度 值 


(时 钟 6 点 钟 ) x 轴 正方 向 (时 


A 
弧度 -< 4 3 、 钟 3 点 钟 弧 度 
v 





=0 或 2 








(时 钟 6 点 钟 ) 
3IUE-0.5 « 


图 5-6” 弧 线 和 圆 形 的 绘制 方向 
arcTo 方 法 的 使 用 格式 如 下 : 


arcTo(x1, y1, x2, y2, radius) 
arcTo 方法 将 利用 由 当前 端点 、 端 点 1(x1,y1) 和 端点 2G2.y2) 这 三 个 点 形成 的 夹 角 ， 然 后 


绘制 一 段 与 夹 角 的 两 边 相 切 且 半径 为 radius 的 圆 上 的 弧 线 。 一 般 情 况 下 ， 绘 制 弧 线 的 开始 位 
置 是 当前 端点 ， 结 束 位 置 是 端点 2， 并 且 弧 线 绘制 的 方向 就 是 连接 这 两 个 端点 的 最 短 圆 弧 的 
方向 。 此 外 ， 如 果 当 前 端点 不 在 指定 的 贺 上 ， 这 种 方法 还 将 绘制 一 条 从 当前 端点 到 弧 线 起 点 
的 直线 。 
在 了 解 了 用 canvas 绘制 弧 线 的 上 述 API 之 后 ,我 们 一 起 来 看 看 如 何 使 用 arc 方 法 绘制 弧 线 。 
【 例 5-4】 使 用 canvas 绘制 弧 线 。 
<script type="text/javascript" charset="gb2312"> 
function draw() ( 
var c = document.getElementBylId("canvas1"); 
if (c = null) return false; 
var context = c.getContext(2d"): 
context.beginPath(); 
/设置 弧 线 的 颜色 为 蓝 色 
context.strokeStyle = "blue": 
var circle = ( 
x: 50, /圆心 的 x fiebat 
y: 50, /圆心 的 了 轴 坐 标 值 
r: 100// 圆 的 半径 





ds 

/ 沿 着 以 坐标 点 (100.100) 为 圆心 、 半 径 为 50px 的 圆 的 顺 时 针 方 向 绘制 弧 线 
context.arc(circle.x, circle.y, circle.r, 0, Math.PI/2, false); 
/按照 指定 的 路 径 绘制 弧 线 

context.stroke(): 
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</script> 
</head> 
<body onload="draw()"> 
«canvas id-"canvas1" width="400" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 

运行 以 上 代码 ， 效 果 如 图 5-7 所 示 。 

以 上 代码 设置 绘制 的 弧 线 所 在 圆 的 圆心 坐标 为 
(100,100), 半径 为 50px。 由 于 半径 为 + 的 圆 的 周 长 为 2n. 
也 就 是 说 ， 完 整 的 圆 对 应 的 弧度 为 2x( 换 算 成 常规 角度 
就 是 360°)， 所 以 要 画 一 个 圆 的 4 弧 线 ， 只 要 弧度 为 
2( 即 90°) 就 可 以 了 。 上 面 的 代码 使 用 了 JavaScript 中 表 
未 的 常量 Math.PI. 

以 上 弧 形 是 顺 时 针 绘 制 ,如果 要 逆 时 针 绘 制 , 代码 为 : 

context.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, true); 

[515-5] 使 用 canvas 绘制 圆 形 。 

function draw() ( 

var c = document.getElementBylId("canvas]"); 

if (c = null) retum false; 

var context = c.getContext('2d"); 

context.beginPath(): 

/设置 弧 线 的 颜色 为 蓝 色 

context.strokeStyle = "blue"; 

var circle — ( 
x: 100, /圆心 的 x fit^ bs (t 
y: 100, /圆心 的 y 轴 坐标 值 
r: 50// 圆 的 半径 

















图 5-7 fx 


DE 
/以 canvas 中 的 坐标 点 (100,100) 为 圆心 ， 绘 制 一 个 半径 为 50px 的 圆 形 
context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true); 
/按照 指定 的 路 径 绘制 弧 线 
context.stroke(); 
} 
运行 以 上 代码 ， 效 果 如 图 5-8 所 示 。 
需要 注意 的 是 ，arc 方法 中 的 起 始 弧度 参数 startRad 和 结 
束 弧 度 参数 endRad 都 以 弧度 为 单位 ， 即 使 输入 一 个 数字 ,， 例 
如 360, 也 仍然 会 被 看 作 360 弧度 。 将 上 述 代 码 的 结束 弧度 设 
为 360 会 产生 什么 样 的 后 果 呢 ? 这 就 要 看 绘制 的 方向 ， 即 
anticlockwise 参数 的 值 了 , 如 果 是 顺 时 针 绘 制 (参数 值 为 false)， 
将 绘制 一 个 完整 的 圆 ， 如 果 是 逆 时 针 绘制 (参数 值 为 tue)， 大 | 
于 2n 的 弧度 将 被 转换 为 一 个 弧度 相等 但 不 大 于 2x 的 弧度 。 图 5-8 绘制 图 
例如 ， 将 上 述 代码 中 的 结束 弧度 设 为 3x(Math PI*3)， 如 果 anticlockwise 参数 为 false， 将 会 显 
示 为 一 个 完整 的 圆 ， 如 果 为 tue， 显 示 效 果 与 设 为 x 时 的 显示 效果 一 致 。 
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5.2.4 


绘制 三 角形 





和 绘制 矩形 一 样 ， 绘 制 的 三 角形 可 以 是 实心 的 ， 也 可 以 是 空心 的 (也 就 是 没有 填充 色 ， 


只 有 轮廓 线 )。 绘 制 实心 三 
【 例 5-6】 使 
function draw() { 


运行 














三 角形 。 


canvas 绘制 





角形 使 用 Bl 方法 ， 绘 制 空 心 三 


var c = document.getElementBylId("canvas1"); 


if (c = null) retum false; 

var context = c.getContext('2d"); 
context.beginPath(); 
context.moveTo(100, 0); 
context.lineTo(50, 150); 
context.lineTo(150, 250); 


context.closePath(); /填充 或 闭合 需要 先 闭合 路 径 才能 画图 


/空心 三 角形 
context.strokeStyle — 
context.stroke(); 
/实心 三 角形 
context.beginPath(); 
context.moveTo(350, 0); 
context line To(300, 150); 
context.lineTo(400, 250); 
context.closePath(); 
context.fill(): 


"red": 


i: 
行 以 上 程序 ， 效 果 如 图 5-9 所 示 。 


was- 
exc 


127.0.0.1:£ 





20/ch05/5-6.htm 


图 5-9 绘制 三 角形 


皮 工 具 的 功能 一 样 。 


在 canvas 中 绘制 一 些 图 形 


常见 的 清空 画布 的 方法 有 以 下 3 种 : 


第 一 种 ， 也 就 是 最 简单 的 办 法 ， 








1 于 canvas 每 当 高 











或 宽度 被 重 i 


角形 使 用 stroke 方法 。 


后 , 许多 时 候 可 能 需要 清除 这 些 图 形 ,就 像 一 些 绘图 程序 中 橡 
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清空 ， 因 此 可 以 用 以 下 方法 清空 画布 











function clearCanvasO</span> 

{ 
var c=document.getElementById("canvas1"); 
var context=c.getContext("2d"); 
c.height-c.height; 

j 

第 二 种 方法 是 使 用 clearRect 方法 ， 代 码 如 下 : 

function clearCanvas() 

ü 
var c-document.getElementByld("canvas1"); 
var context-c.getContext("2d"): 


context.clearRect(0.0.c.widthc.height): 


} 
第 三 种 方法 类 似 于 第 二 种 方法 ， 可 以 用 某 一 特定 颜色 填充 画布 ， 从 而 达到 清空 的 目的 : 


function clearCanvas() 

Á 
var c=document.getElementById("canvas1"); 
var context=c.getContext("2d"); 
context.fillStyle="#000000"; 
context.beginPath(); 
context.fillRect(0,0.c.width.c.height): 
context.closePath(); 


5.3. 绘制 贝 塞 尔 曲线 


本 节 主 要 介绍 使 用 canvas 绘制 贝 塞 尔 曲线 ， 包 括 二 次 和 三 次 贝 赛 尔 曲线 。 


5.3.1 二 次 贝 塞 尔 曲线 


绘制 贝 塞 尔 曲线 需要 用 到 quadraticCurveTo 方法 ， 使 用 方法 如 下 : 


quadraticCurveTo(cpx.cpy.x.y) 


其 中 ，(cpx.cp) 表 示 控 制 点 的 坐标 ，(x.y) 表 示 终 点 坐标 。 数 学 公式 表示 如 下 : 
B(t) 2 (e t} By & 2t(0 — DP; £P. te [0,1] 
二 次 贝 赛 尔 曲线 的 路 径 由 给 定点 Pe、P1、P; 的 函数 BC 追踪， 如 图 5-10 所 示 。 


oP, 


n t=.32 


图 5-10 二 次 贝 塞 尔 曲线 BD 追踪 示 意图 
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【 例 5-7】 绘制 二 次 贝 塞 尔 曲线 。 
function draw() ( 

var c = document.getElementBylId("canvas]"); 
if (c — null) retum false; 
var context = c.getContext(2d"); 
/绘制 起 始点 、 控 制 点 、 终 点 
context.beginPath(); 
context.moveTo(20, 170); 
context.lineTo(130, 40); 
context.lineTo(180, 150); 
context.stroke(); // 绘制 二 次 贝 寨 尔 曲线 
context.beginPath(); 
context.moveTo(20, 170); 
context.quadraticCurveTo(130, 40, 180, 150); 
context.strokeStyle — "red": 
context.stroke(); 














—-— 


运行 以 上 程序 ， 效 果 如 图 5-11 所 示 。 
* canvas 40m x NOUS 
5.30 三 次 贝 塞 尔 曲线 C fi D 127.0.0.1:8020/ch05; 7 三 


绘制 三 次 贝 塞 尔 曲线 则 需要 使 用 3 个 控制 点 , 绘制 方 
法 如 下 : 
bezierCurveTo(cplx,cply,cp2x,cp2y,x;y) P i 


其 中 ，(cplx,cply) 表 示 第 一 个 控制 点 的 坐标 ， ,人 
(cp2x,cp2y) 表 示 第 二 个 控制 点 的 坐标 ，(x,y) 表 示 终 点 的 化 图 5-11 
标 。 数 学 公式 表示 如 下 : 

B(r) - (1 -t+3Bt( — t? 4 3b? (0 — 1) + i, te [0,1] 

Hep, Pos Pj. Pas Ps 四 个 点 在 平面 或 三 维 空间 中 定义 了 三 次 贝 赛 尔 曲线 。 曲 线 起 始 于 
Po 走向 Pl， 并 从 P2 的 方向 来 到 了 Ps。 一 般 不 会 经 过 P; 或 Pz， 这 两 个 点 只 是 在 那里 提供 方向 指 
示 。Po 和 了 Pi 之 间 的 间距 决定 了 曲线 在 转 而 趋 近 P; 之 前 ， 走 向 Po Zr] ^ SEG KS 如 图 
5-12 所 示 。 





D 


绘制 二 次 贝 赛 尔 曲线 


oP, oP; 





Po t=.44 oP; 
图 5-12 三 次 贝 塞 尔 曲线 BOERE 


【 例 5-8】 绘制 三 次 贝 塞 尔 曲线 。 
function draw() ( 
var c = document.getElementBylId("canvas1"); 
if (c — null) return false; 
var context = c.getContext(2d"): 
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/绘制 起 始点 、 控 制 点 、 终 点 


context.beginPath(): 
context.moveTo(25, 175); 
context lineTo(60, 80); 
context lineTo(150, 30); 
context lineTo(170, 150); 


context.stroke(); // 绘制 三 次 贝 塞 尔 曲线 


context.beginPath(); 
context.moveTo(25, 175); 


context.bezierCurveTo(60, 80, 150, 30, 170, 150); 


context.strokeStyle = "red": 
context.stroke(): 
H 


运行 以 上 代码 ， 效 果 如 图 5-13 所 示 。 其 中 ， 两 侧 的 两 条 直线 为 控制 线 ， 而 最 上 方 直线 的 


两 个 端点 ， 也 就 是 两 条 控制 线 的 端点 ， 


A, 














ml 


线 的 控制 点 。 


€ Q fi (5 127.00.1:8020/ch05, 7: 








图 5-13 绘制 三 次 贝 赛 尔 曲线 


5.4 绘制 变形 图 形 


适当 地 运用 图 形 的 变换 ， 如 旋转 、 缩 放 操作 ， 可 以 创建 出 大 量 复杂 多 变 的 图 形 。 在 了 解 
图 形 的 变换 之 前 ， 我 们 首先 来 了 解 一 下 canvas 状态 的 保存 和 恢复 。 


5.4.1 保存 与 恢复 canvas 状态 


当 在 画布 上 使 用 其 2D 上 下 文 进行 图 形 绘制 时 ， 可 以 通过 操作 2D 上 下 文 属性 来 绘制 不 
同 风格 的 图 形 ， 例 如 不 同 的 字体 、 填 充 等 。 通 常情 况 下 ， 在 画布 上 绘图 时 ， 需 要 更 改 在 绘制 
的 2D 背景 下 的 状态 。 例 如 ， 需 要 设置 strokStyle 属性 或 进行 旋转 操作 等 ， 这 些 操作 通过 设置 
2D 上 下 文 属性 来 实现 。 由 于 设置 绘图 的 属性 非常 烦琐 ， 每 次 更 改 时 都 要 重 来 一 次 ， 因 此 , 我 
们 可 以 考虑 利用 堆栈 来 保持 绘图 的 属性 并 在 需要 的 时 候 随时 恢复 。 

可 以 通过 下 面 两 个 方法 来 实现 保存 绘图 属性 和 获取 绘图 属性 : 





context.save(): 
context.restore(): 
下 面 我 们 来 看 一 个 示例 。 
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【 例 5-9】 保存 与 恢复 canvas 绘画 状态 。 
function draw() { 

var c = document.getElementBylId("canvas1"); 
if (c = null) retum false; 
var context = c.getContext('2d'); 
/绘制 起 始点 、 控 制 点 、 终 点 
context.fillStyle = "4661166": 
context.strokeStyle = "#990000"; 
context line Width = 5; 
context.fillRect(5, 5, 50, 50); 
context.strokeRect(5, 5, 50, 50); 
context.save(); 
context.fillStyle = "#6666ff"; 
context.fillRect(65, 5, 50, 50); 
context.strokeRect(65, 5, 50, 50); 
context.save(): 
context.strokeStyle = "#000099"; 
context.fillRect(125, 5, 50, 50); 
context.strokeRect(125, 5, 50, 50); 
context.restore(); 
context.fillRect(185, 5, 50, 50); 
context.strokeRect(185, 5, 50, 50); 
context.restore(); 
context.fillRect(245, 5, 50, 50); 
context.strokeRect(245, 5, 50, 50); 


) 
运行 以 上 代码 , 效果 如 图 5-14 所 示 。 如 果 需 要 频繁 地 做 各 种 复杂 的 绘图 设置 ， 状 态 堆 栈 


是 非常 有 用 的 。 需 要 注意 的 是 ， 所 有 的 2D 绘图 上 下 文 属性 都 是 可 保存 和 恢复 的 属性 ， 但 绘 
制 的 内 容 不 是 。 也 就 是 说 ， 虽 然 恢复 了 绘图 上 下 文 ， 但 并 不 会 恢复 其 所 绘制 的 图 形 。 


日 127.0.0.1:8020/ch05/5-9.F v? 
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图 5-14 保存 与 恢复 canvas 状态 





5.4.2 ”移动 坐标 空间 


canvas 坐标 空间 默认 以 画布 左上 角 (0.0) 为 原点 , x 轴 水 平 向 右 为 正 向 , y 轴 垂直 向 下 为 正 
向 ， 该 坐标 空间 的 单位 通常 为 像素 。 在 绘制 图 形 时 ， 可 以 使 用 translate 方法 移动 坐标 空间 ， 


使 画布 的 变换 矩阵 发 生 水 平和 垂直 方向 的 偏 移 ， 其 用 法 如 下 ;: 
context.translate(dx. dy); 


其 中 ，dx、dy 分 别 为 坐标 原点 沿 水 平和 垂直 两 个 方向 的 偏 移 量 ， 如 图 5-15 所 示 。 
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图 5-15 移动 坐标 空间 操作 示意 图 


需要 注意 的 是 , 在 进行 图 形变 换 之 前 , 最 好 先 使 用 save 方法 保存 当前 状态 , 之 后 用 restore 
方法 自动 恢复 原来 保存 的 状态 ， 这 比 手动 恢复 更 加 高 效 ， 特 别 是 当 重 复 某 种 操作 时 。 
【 例 5-10】 移动 坐标 空间 。 
<title> 移 动 坐标 空间 </title> 
«script type-"text/javascript" charset-"gb2312"- 
function draw() { 
var c = document.getElementByld("canvas"); 
if (c = null) retum false; 
var context = c.getContext('2d"); 
context.translate(80, 80); 
for (vari= 1;i< 10; i) ( 
context.save(): 
context.translate(60 * i, 0); /平移 画布 位 置 ， 改 变 画布 的 坐标 原点 
drawTop(context, "rgb(+(3041)H,+H(25S5-30#1)H,25S) 7); 
drawGrip(context); 
context.restore(): 
} 
b 
function drawTop(context, fillStyle) { 
context.fillStyle = fillStyle; 
context.beginPath(); 
context.arc(0, 0, 30, 0, Math.PI, true); 
context.closePath(): 
context.fill(): 
$ 
function drawGrip(context) { 
context.save(): 
context.fillRect(-1.5, 0, 1.5, 40); 
context.beginPath(); 
context.strokeStyle — "blue": 
context.arc(-5. 40, Math.PI, Math.PI * 2, true): 
context.stroke(); 
context.closePath(): 
context.restore(): 
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</script> 
</head> 
<body onload="draw()"> 


«canvas id="canvas1" width="700" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 
</body> 
运行 以 上 代码 ， 效 果 如 图 5-16 所 示 。 
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图 5-16 移动 坐标 空间 的 效果 


5.4.3 ”旋转 坐标 空间 


若 要 旋转 坐标 空间 ， 应 使 用 rotate 方法 。rotate 方法 用 于 以 原点 为 中 心 旋转 canvas， 实 质 
上 仍 是 旋转 canvas 上 下 文 对 象 的 坐标 空间 ， 用 法 如 下 : 
context.rotate(angle); 
其 中 ，angle 参数 为 旋转 角度 ， 旋 转角 度 以 顺 时 针 方 向 为 正方 向 ， 以 弧度 为 单位 ， 旋 转 
中 心 为 canvas 的 原点 ， 如 图 5-17 所 示 。 


(0,0) 





图 5-17 旋转 坐标 空间 示意 图 


【 例 5-11】 旋转 坐标 空间 。 
«script type-"text/javascript" charset="gb2312"> 
function draw() { 
var c = document .getElementByld("canvas1"); 
if (c — null) return false; 
var context = c.getContext(2d"): 
context.translate(150, 150); 
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for (vari=1;i<9; i7) ( 
context.save(): 
context.rotate(Math.PI * (214+iy14):V 旋 转 画 布 位 置 ， 改 变 画 布 的 坐标 原点 
context.translate(0, -100); 
draw Top(context, "rgb(--(30*1)*",(255-30*1)!* 255)"); 
drawGrip(context): 
context.restore(): 


} 


function drawTop(context, fillStyle) { 
context.fillStyle = fillStyle; 
context.beginPath(); 
context.arc(0, 0, 30, 0, Math.PI, true): 
context.closePath(); 
context.fill(): 

j 


function drawGrip(context) ( 
context.save(): 
context.fillRect(-1.5, 0, 1.5, 40); 
context.beginPath(); 
context.strokeStyle — "blue": 
context.arc(-5, 40, Math.PI, Math.PI * 2, true); 
context.stroke(); 
context.closePath(); 
context.restore(); 

} 

</script> 
运行 以 上 代码 ， 效 果 如 图 5-18 所 示 。 可 见 ，canvas 中 图 形 的 实现 ， 其 实 是 通过 改变 画布 的 
坐标 原点 来 实现 的 。 所 谓 “移动 图 形 ”， 只 是 看 上 去 被 移动 了 ， 实 际 移动 的 是 坐标 空间 。 
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图 5-18 旋转 坐标 空间 的 效果 
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544 ”缩放 图 形 


缩放 图 形 主 要 通过 scale 方法 来 实现 ， 具 体 使 用 格式 如 下 : 
ctx.scale(x;y); 
其 中 ， 参 数 x 为 x 轴 的 缩放 ， 参 数 y 为 y 轴 的 缩放 。 如 果 要 缩小 ， 参 数值 为 小 于 1 的 数 
值 ， 如 果 要 放大 ， 参 数值 为 大 于 1 的 数值 。 下 面 来 看 一 个 缩放 图 形 的 例子 。 
【 例 5-12】 缩放 图 形 。 
function draw() ( 
var c = document.getElementBylId("canvas]"); 
if (c — null) return false; 
var context = c.getContext(2d"); 
context.translate(180, 20); 
for (vari=0;i< 80; i+) ( 
context.save(): 
context.translate(30, 30); 
context.scale(0.95, 0.95); 
context.rotate(Math.PI / 12); 
context.beginPath(); 
context.fillStyle = blue'; 
context.globalAlpha = '0.4'; 
context.arc(0, 0, 50, 0, Math.PI * 2, true); 
context.closePath(): 
context.fill(); 
} 


} 
运行 以 上 程序 ， 效 果 如 图 5-19 所 示 。 
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图 5-19 缩放 图 形 


54.5 ”矩阵 变换 
矩阵 变换 主要 通过 transform 方法 来 实现 。setTransform 方法 用 于 将 当前 的 变化 矩阵 重 置 
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为 最 初 的 矩阵 ， 然 后 以 相同 的 参数 调用 transform 方法 。 即 先 set( 重 置 )， 再 transform( 4455). 
具体 使 用 格式 如 下 : 
context.transform(m] 1.m12.m21.m22.dx.dy): 
transform 方法 必须 将 当前 的 变换 矩阵 与 下 面 的 矩阵 进行 乘法 运算 ， 如 表 5-1 所 示 。 也 就 
是 说 ， 假 设 ACx.y) 要 变换 成 BCx.yY)， 可 以 通过 乘 以 下 述 窍 阵 得 到 。 


表 5-1 和 矩阵 与 矩阵 的 乘法 运算 











mll( 默 认为 1) m21( 默 认为 0) dx 
m12( 默 认为 0) m22( 默 认为 1) dy 
0 0 1 





前 面 的 平移 和 缩放 操作 都 可 以 通过 矩阵 变换 来 实现 。 
1. 使 用 矩阵 变换 实现 平移 


y 








图 5-20 将 A 点 平移 到 B 点 
从 图 5-20 PAN, x'=x+dx, y'=y+dy, BI: 
, 10 dx 
y'|=|0 1 dy 


x 
1 
] 00 1 人 1 
其 中 , dx 为 原点 沿 着 x 轴 移 动 的 数值 , y 为 原点 沿 着 y 轴 移 动 的 数值 。context.translate(x,y) 
可 以 用 下 面 的 transform 方法 来 替代 : 
context.transform(0, 1. 1,0,dx.dy); 
或 
contexttransformm(1.0.0.1.dx.dy): 
2. 使 用 矩阵 变换 实现 缩放 
在 缩放 设置 操作 中 ，ml1、m22 和 m12. m21 分 别 表示 在 x 轴 和 y 轴 上 的 缩放 倍数 : 
x-mll*x, y-m22*y 
或 
x'ml2*x, y-n2l*y 
scale(x.y) 可 以 通过 下 面 的 transform FAKER: 
context.transform(m11.0.0.m22.0.0): 


x 














*88* HTML5+CSS3 网 页 设计 基础 教程 








Bi: 
context.transform(0.m12.m21.0.0.0); 


3. 使 用 矩阵 变换 来 实现 旋转 
前 面 提 到 ， 旋 转 操作 可 以 通过 rotate 方法 来 实现 ， 操 作 示意 图 如 图 5-21 所 示 。 


十 BCxcy) 
/ AQ) 








图 5-21 旋转 操作 示意 图 


可 以 用 下 面 的 transform 方法 来 蔡 代 : 
context.transform(cos6,sin6,-sin0,cos0,0.0): 
其 中 9 为 旋转 的 角度 ，dx、dy 都 为 0， 表示 坐标 原点 不 变 ， 即 ; 
x' = x*cos0-y*sin0 
y =x*sinð+ y*cos0 
则 有 : 
context.transform(Math.cos(0*Math.PI/180).Math.sin(0*Math.PI/180).-Math.sin(0*Math.PI/180).Math.cos 
(9*Math.PI/180),0,0) 
可 以 替代 ; 
context.rotate(0); 
也 可 以 使 用 以 下 语句 替代 : 
context.transform(-Math.sin(0*Math.PI/180).Math.cos(0*Math.PI/180).Math.cos(0*Math.PI/180).Math.sin 
(9*Math.PI/180), 0,0) 
例如 ，contexttransform(0.95.0.,0.0.95.30.30) 可 以 替代 以 下 语句 ; 
context.translate(30,30); 
context.scale(0.95.0.95): 
下 面 来 看 一 个 矩阵 变换 的 例子 。 
【 例 5-13】 矩阵 变换 。 
function draw() ( 
var c = document.getElementByld("canvas1"); 
if (c = null) retum false; 
var context = c.getContext('2d'); 
context.translate(200, 20); 
for (var i =0; i <80; H+) ( 
context.save(); 
context.transform(0.95, 0, 0, 0.95, 30, 30); 
context.rotate(Math.PI / 12); 
context.beginPath(): 
context.fillStyle = red': 
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context.globalAlpha — '0.4"; 
context.arc(0, 0, 50, 0, Math.PI * 2, true); 


context.closePath(); 
context.fill(); 

) 

context.setTransform( l, 0, 0, 1, 10, 10); 


context fillStyle = 'blue": 
context.fillRect(0, 0, 50, 50); 
context.fill(): 


) 
运行 以 上 代码 , 效果 如 图 5-22 所 示 。 以 上 代码 将 前 面 的 窍 阵 恢 复 为 最 初 的 矩阵 ， 即 恢复 
最 初 的 原点 ， 然 后 将 坐标 原点 改 为 (10.10)， 并 以 新 的 坐标 绘制 一 个 蓝 色 的 矩形 。 首 先 通过 
transform 方法 缩小 图 形 到 上 次 的 0.95， 循 环 85 次 ， 同 时 移动 和 旋转 坐标 空间 ， 从 而 实现 图 
形 呈 螺旋 状 地 由 大 到 小 变化 。 


x 
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图 5-22 ”使 用 矩阵 实现 缩放 效果 


55 ”丰富 图 形 效 果 


除了 filStyle 和 strokeStyle 属性 外 , canvas 还 支持 更 多 的 颜色 和 样式 选项 , 具体 包括 线 型 、 
渐变 、 图 案 、 透 明度 和 阴影 。 
5.5.1 应 用 不 同 的 线 型 

在 前 面 的 绘图 过 程 中 , 使 用 到 一 些 线条 的 方法 和 属性 。 通过 lineWidth、 lineCap、 lineJoin、 
miterLimit 属性 ， 可 以 设置 线条 的 粗细 、 端 点 样式 、 两 线段 连接 处 样式 和 绘制 交点 的 方式 。 

o lineWidth: 线 宽 ， 也 就 是 线条 的 粗细 ， 取 值 必须 为 正 数 ， 比 如 lineWidth=1.0。 

e lineCap: 线段 端点 的 样式 ， 有 butt( 平 头 )、round( 圆 头 ) 和 square( 方 头 ) 三 种 取 值 ， 默 认 





值 为 butt。 
e lineJoin: 两 线段 连接 处 的 样式 ， 包 括 round( 圆 角 )、bevel( 斜 角 ) 和 miter( 直 角 )， 默 认 
值 为 miter. 


e miterLimit: 设置 两 线段 连接 处 交点 的 绘制 方式 , 当 宽 线条 使 用 lineJoin 属性 并 将 其 值 
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设置 为 miter 时 ， 如 果 绘 制 两 条 线段 并 以 锐角 相交 ， 那 么 得 到 的 斜面 可 能 会 非常 长 。 
当 斜 面 过 长 时 ， 图 形 就 会 显得 不 协调 。miterLimit 属性 的 作用 是 为 斜面 的 长 度 设置 一 
个 上 限 ， 默 认为 10， 即 规定 斜面 的 长 度 不 能 超过 线条 宽度 的 10 倍 。 当 和 斜面 的 长 度 达 
到 线 宽 的 10 倍 时 , 就 会 变 为 斜 角 。 如 果 lineJoin 属性 的 值 为 round 或 bevel, miterLimit 
属性 无 效 。 


5.5.2 ”绘制 线性 渐变 


所 谓 线性 渐变 ， 是 指 从 开始 点 到 结束 点 ， 颜 色 呈 直线 的 徐徐 变化 的 效果 。 为 了 实现 这 种 
效果 ， 我 们 绘制 时 必须 指定 开始 和 结束 的 颜色 。 而 在 canvas 中 ， 不 仅 可 以 只 指定 开始 和 结尾 
的 两 点 ， 中 间 位 置 也 能 指定 。 

可 以 使 用 createLinearGradient 方法 绘制 线性 渐变 ， 该 方法 可 以 获得 一 个 CanvasGradient 
对 象 ， 通 过 这 个 对 象 的 addColorStop 方法 添加 颜色 。 

createLinearGradient 方法 的 使 用 方式 如 下 : 

CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1) 

指定 渐变 的 开始 点 (x0,y0) 和 结束 点 (xl.y1) 之 后 ， 返 回 线性 渐变 对 象 CanvasGradient. 4 
后 通过 addColorStop 方法 , 设置 在 offset 为 0 的 地 方 为 开始 点 的 颜色 , 在 offset 为 1 的 地 方 为 
结束 点 的 颜色 。 当 x0=x1 并 且 y0=yl 时 ， 无 渐变 效果 。 

addColorStop 方法 的 使 用 方式 如 下 : 

CanvasGradient.addColorStop(offset, color) 
这 个 方法 用 来 增加 点 的 颜色 ， 如果 offset 大 于 1 或 小 于 0, 会 发 生 INDEX_SIZE_ERR 异 


是 指定 的 0 到 1 之 间 的 值 ， 则 是 对 应 中 间 的 比例 位 置 。 
【 例 5-14】 绘制 线性 渐变 。 
function draw() ( 

var c = document.getElementBylId("canvas1"); 
if (c = null) retum false; 
var context = c.getContext('2d"); 
context.beginPath(): 
/* 指定 渐变 区 域 */ 
var grad= context.createLinearGradient(0.0, 0,300); 
/* 指定 几 个 颜色 */ 
grad.addColorStop(0.'rgb(192, 80, 77)'); Na 
grad.addColorStop(0.5.'rgb(155, 187, 89)): / 绿 
grad.addColorStop(1.'rgb(128, 100, 162)): E 
庆 将 这 个 渐变 设置 为 liStyle */ 
context.fillStyle = grad; 
庆 RBE */ 
context.rect(0,0, 300,300): 
context fill(): 


) 
运行 以 上 代码 ， 效 果 如 图 5-23 所 示 。 在 上 述 代码 中 ，(0.0.0.300) 指 定 了 一 条 垂直 的 线 ， 
所 以 最 终 效 果 是 垂直 地 进行 渐变 。 如 果 要 实现 水 平 渐变 , 改 成 createLinearGradient(0.0. 300,0); 
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如 果 要 实现 斜 线 渐变 ， 改 成 createLinearGradient(0, 0, 300, 300). 





cx 








图 5-23 “绘制 线性 渐变 
5.5.3 ”绘制 径 向 渐变 


径 向 渐变 ， 其 实 就 是 环形 渐变 ， 实 现 由 圆心 (或 是 较 小 的 同心 圆 ) 开 始 向 外 扩散 渐变 的 效 
果 。 线 性 渐变 指定 了 起 点 和 终点 ， 径 向 渐变 则 指定 了 起 始 圆 和 结束 圆 的 圆心 和 半径 。 径 向 渐 
变 使 用 createRadialGradient 来 获得 canvas 的 CanvasGradient 对 象 ， 所 以 addColorStop 方法 也 
是 通用 的 。 使 用 方法 如 下 : 
CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) 
起 始 贺 的 圆心 为 (x0,y0)， 半 径 为 0; ZAR PIS (xLyl) FA rl. ACER 
数 ，INDEX_SIZE_ERR 异常 发 生 ， 而 如 果 圆 心 和 半径 都 相等 ， 则 没有 渐变 效果 。 
首先 利用 createRadialGradient 方法 指定 渐变 的 起 始 圆 和 结束 圆 , 得 到 一 个 CanvasGradient 
对 象 ， 再 对 这 个 对 象 使 用 addColorStop 方法 以 指定 各 个 位 置 的 颜色 。 最 后 ， 将 这 个 
CanvasGradient 对 象 作 为 fillStyle 使 用 。 
【 例 5-15】 绘制 径 向 渐变 。 
function draw() ( 
var c = document.getElementBylId("canvas"); 
if(c — null) retum false; 
var context  c.getContext('2d"): 
context.beginPath(): 
PO 设 定 渐变 区 域 */ 
var grad = context.createRadialGradient(70, 70, 20, 70, 70, 70); 
E 设 定 各 个 位 置 的 颜色 */ 
grad.addColorStop(0, 'red'); 
grad.addColorStop(0.5, yellow): 
grad.addColorStop(1, 'blue"); 
context.fillStyle = grad: 
context. rect(0, 0, 140, 140); 
context.fill(); 


j 
运行 以 上 程序 ， 效 果 如 图 5-24 Bros. 


。92 。 HTML5+CSS3 网 页 设计 基础 教程 











图 5-24 绘制 径 向 渐变 


5.54 ”绘制 图 案 


在 canvas "I, createPattem 方法 用 来 实现 图 案 效 果 ， 在 指定 的 方向 重复 指定 的 元 素 。 元 
素 可 以 是 图 片 、 视 频 或 其 他 canvas 元 素 。 被 重复 的 元 素 可 用 于 绘制 /填充 矩形 、 圆 形 或 线条 等 。 
其 用 法 如 下 : 

context.createPattern(image, "repeatlrepeat-xlrepeat-ylno-repeat"); 

其 中 ， 各 参数 的 含义 如 下 : 

image: 规定 要 使 用 的 图 片 、 画 布 或 视频 元 素 。 

repeat: 默认 。 该 模式 在 水 平和 垂直 方向 重复 。 

repeat-x: 该 模式 只 在 水 平方 向 重复 。 

repeat-y: 该 模式 只 在 垂直 方向 重复 。 

no-repeat: 该 模式 只 显示 一 次 (不 重复 )。 

【 例 5-16】 绘制 图 案 。 

«script type-"text/javascript" charset="gb2312"> 
function draw() ( 

var c = document.getElementByld("canvas1"); 

if (c = null) return false; 

var context = c.getContext(2d"); 

var img = new Image(): 

img.src = "img/1 png"; 

img.onload — function() ( 
/创建 图 案 
var ptm = context.createPattern(img, repeat); 
context.fillStyle = ptm: 
context.fillRect(0.0,600,600): 





} 

} 
</script> 

</head> 

<body onload="draw0"> 
«canvas id="canvas1" width="600" height="300"> 
您 的 浏览 器 不 支持 HTMLS canvas 标签 。 
</canvas> 

</body> 

运行 以 上 程序 ， 效 果 如 图 5-25 所 示 。 
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图 5-25 绘制 图 案 


5.5.5 ”设置 图 形 的 透明 度 

通过 前 面 的 示例 可 知 ,在 canvas 绘图 中 ， 有 两 种 设置 透明 度 的 方法 : globalAlpha 属性 和 
rgba 方法 。globalAlpha 属性 适合 为 大 量 图 形 设置 相同 的 透明 度 。rgba 方法 则 是 通过 设置 色彩 
透明 度 的 参数 来 为 图 形 设置 不 同 的 透明 度 。 

使 用 rgba 方法 可 以 设置 具有 透明 度 的 颜色 ， 用 法 如 下 : 

rgba(R,GB,A) 

其 中 ，R、G、B 将 颜色 的 红色 、 绿 色 和 蓝 色 成 分 指定 为 0~255 十 进 制 整数 ，A 把 alpha 
成 分 指定 为 0.0~1.0 的 浮 点 数值 ，0.0 为 完全 透明 ，1.0 为 完全 不 透明 。 例 如 ， 可 以 使 用 
rgba(0,255,0,0.5) 表 示 半 透明 的 完全 绿色 。 


5.5.6 ”创建 阴影 


canvas 提供 了 绘制 元 素 阴影 的 功能 ， 主 要 的 属性 包括 : shadowColor、shadowBlur、 
shadowOffsetX, shadowOffsetY. łĘ}, shadowColor 定义 阴影 颜色 样式 ，shadowBlur 定义 阴 
影 模 糊 系数 , shadowOffsetX 定义 阴影 的 x 轴 偏 移 量 , shadowOffsetY 定义 阴影 的 y 轴 偏 移 量 。 
各 个 属性 的 具体 说 明 如 表 5-2 所 示 。 


表 5-2_ 用 于 创建 阴影 的 属性 





属性 名 属性 描述 示例 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 context.shadowColor-color; 
shadowBlur 设置 或 返回 阴影 的 模糊 系数 context.shadowBlur-number; 





shadowOffsetX CAEN UNIES ER MR context.shadowOffsetX-number: 
称 x 轴 偏 移 量 


shadowOffsetY | “设置 或 返回 形状 与 阴影 的 季 直 距离 ， 或 | oontextshadowOffsetY-aumber 
FK y 轴 偏 移 量 





需要 注意 的 是 ， 定 义 shadowColor 后 ， 至 少 需要 用 shadowBlur 定义 阴影 模糊 系数 ， 否 则 


将 看 不 到 阴影 效果 。 
【 例 5-17】 设置 阴影 效果 。 
function draw() ( 


var c = document.getElementBylId("canvas1"); 
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if (c — null) return false; 
var context = c.getContext(2d"): 
context.font — "30px Verdana"; 
/定义 线性 渐变 
var lg = context.createLinearGradient(0, 0, 200, 0); 
lg.addColorStop("0", "magenta"); 
lg.addColorStop("0.5", "blue"): 
lg.addColorStop(" 1.0", "red"); 
/设置 阴影 模糊 系数 
context.shadowBlur = 10; 
// 设 置 阴影 颜色 
context.shadowColor = 'black': 
/设置 阴影 的 x 轴 偏 移 量 
context.shadowOffsetX = 5; 
/设置 阴影 的 y 轴 偏 移 量 
context.shadowOffsetY = 5; 
// 将 渐变 设 定 为 笔触 
context.strokeStyle = lg; 
// 设 定 绘制 文字 
context.strokeText("Merry Christmas !", 20, 50); 
context.shadowBlur = 20: 
/用 tgba 设置 阴影 颜色 ， 支 持 透 明度 
context.shadowColor = 'rgba(0.0,0.0.8)': 
context.shadowOffsetX = 5: 
context.shadowOffsetY = 5; 
context.strokeStyle = '#3f3f42'; 
context.strokeRect(20, 70, 100, 50); 
context.shadowBlur = 10; 
context.shadowColor = 'black'; 
context.shadowOffsetX = -5; 
context.shadowOffsetY = -5; 
context.fillStyle = '#3f3f47'; 
context.fillRect(20, 150, 100, 50); 
} 
运行 以 上 程序 ， 效 果 如 图 5-26 所 示 。 


€ Q fi |O 127.0.0.1:8020/ch05/5-17.h 7x 


Merry Christmas ! 














图 5-26 创建 阴影 
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5.6 图 像 处 理 


前 面 在 讲解 图 案 的 绘制 时 ， 讲 解 了 图 像 的 createPattem 方法 ， 可 以 使 有 


.95* 


有 这 个 方法 绘制 图 





像 、 平 铺 图 像 。 本 节 介绍 图 像 的 剪裁 操作 、 像 素 处 理 、 组 合 图 形 和 混合 图 像 操作 等 。 
裁剪 图 像 


5.6.1 





使 用 











canvas 绘图 时 ， 可 以 轻松 裁剪 图 像 ， 以 方便 图 片 编辑 、 照 片 分 享 等 应 用 场合 。 


一 般 而 言 ， 图 像 的 裁剪 会 放 在 服务 器 端 进行 ， 但 是 图 片 传送 会 消耗 较 多 的 流量 。 借 助 


HTMLS canvas 绘图 功能 ， 


绘制 路 径 外 部 的 图 像 。 
可 使 用 图 像 上 下 文 对 象 的 不 带 参数 的 clip 方法 来 实现 canvas 的 图 像 裁剪 功能 。clip 方法 
使 用 路 径 来 对 canvas 画布 设置 一 块 裁 前 区 域 。 因 此 ， 必 须 先 创建 路 径 。 路 径 创 建 完 毕 后 ， 调 
用 clip 方法 来 设置 裁剪 区 域 。 
【 例 5-18】 RHR. 
<script type-"text/javascript" charset="gb2312"> 
function draw() ( 


} 


var c = document.getElementByld("canvas1"); 
if (c = null) retum false; 
var context = c.getContext('2d"); 


var gr = context.createLinearGradient(0,400,300,0); 


graddColorStop(0,'rgb(255,255,0)'); 

graddColorStop(1,'rgb(0,255,255)'); 

context.fillStyle = gr; 

context.fillRect(0,0,400,300); 

image = new Image(); 

image.onload = function() { 
drawImg(context, image); 

} 

image.src = "img/4-jpg"; 


function drawImg(context.image) ( 


} 


create5StarClip(context); 
context.drawImage(image.-50.-150.300.300); 


function createSStarClip(context) ( 


context.beginPath(); 
context.translate(100,150); 
var x = Math.sin(0): 
var y = Math.cos(0); 


可 以 在 浏览 器 端 以 比较 简单 的 方式 来 实现 图 像 裁 前 操作 。 
canvas 的 图 像 裁剪 功能 是 指 ， 在 画布 内 使 用 路 径 ， 





路 径 所 包括 区 域内 的 图 像 ， 不 
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var dig = Math.PI/5*4; 
for(vari=01i<S:iHH{ 
var x = Math.sin(i * dig); 
var y = Math.cos(i * dig); 


context.lineTo(dx +x * sdy + y * s); 
H 
context.clip0; 
} 
<script> 


运行 以 上 程序 ， 效 果 如 图 5-27 所 示 。 








图 5-27 图像 截 前 效果 


在 该 例 中 ， 画 布 背景 绘制 完毕 后 ， 调 用 create5StarClip 函数 。 在 该 函数 中 创建 一 条 五 角 
星 路 径 ， 然 后 使 用 clip 方法 设置 裁剪 区 域 。 该 例 中 具体 的 执行 流程 为 : 先 装载 图 像 ， 然 后 调 
用 drawImg 函数 ， 在 该 函数 中 调用 create5StarClip 以 创建 路 径 ， 设 置 裁 前 区域 ， 然 后 绘制 经 
过 裁剪 后 的 图 像 一 一 最 终 可 以 绘制 出 五 角 星 范围 内 的 图 像 。 

裁剪 区 域 设置 好 之 后 ， 接 下 来 绘制 的 所 有 图 形 都 可 以 使 用 这 个 剪裁 区 域 ， 但 是 如 果 要 取 
消 这 块 已 经 设置 好 的 裁剪 区 域 , 需要 用 到 本 章 最 后 一 节 中 介绍 的 绘制 状态 的 保存 和 恢复 功能 。 
这 两 个 功能 保存 和 恢复 图 形 上 下 文 的 临时 状态 。 在 设置 图 像 裁剪 区 域 时 ， 首 先 调用 save 方法 
来 保存 图 形 上 下 文 的 当前 状态 ， 绘 制 完 经 过 裁剪 的 图 像 后 ， 再 调用 restore 方法 来 恢复 之 前 保 
存 的 图 形 上 下 文 状态 。 通 过 这 种 方法 ， 对 之 后 绘制 的 图 像 取 消 裁剪 区 域 。 


5.66.2 ”像素 处 理 


像素 处 理 需 要 用 到 getImageData 和 putImageData 方 法 , 先 用 getImageData 方 法 复制 canvas 
画布 中 的 像素 数据 ， 然 后 对 获取 的 像素 数据 进行 处 理 ， 最 后 通过 puthmageData 方法 将 处 理 完 
的 数据 粘贴 到 canvas 画布 中 。 

首先 来 认识 一 下 LBitmapData， 它 通常 用 来 保存 Image 对 象 。 下 面 是 LBitmapData 中 的 
两 个 函数 : 
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e getPixel(x.y,colorType): 返回 一 个 表示 BitmapData 对 象 中 在 某 个 特定 点 (x, y) 处 RGB 
像素 值 的 数组 。 其 中 colorType 为 需要 获取 的 像素 数据 的 格式 ， 默 认为 像素 数组 ， 当 
设置 成 字符 串 "number" 时 ， 返 回 number 类 型 的 像素 。 

e setPixel(x.y.data): 设置 LBitmapData 对 象 的 单个 像素 。 其 中 data 为 像素 值 (支持 像素 
数组 、 考 F0000 和 0xFF000 3 种 格式 )。 

上 面 这 两 个 函数 用 于 获取 和 设置 单个 像素 ， 当 需要 一 次 性 获取 或 设置 某 个 区 域 的 像素 

时 ， 对 应 的 两 个 函数 如 下 : 

e ”getPixels(rect): 返回 一 组 表示 BitmapData 对 象 中 在 某 个 特定 区 域内 RGB 像素 值 的 数 
组 。 其 中 rect 为 LRectangle 对 象 ， 是 一 个 矩形 。 

e setPixels(rect, data): 将 像素 数据 数组 转换 并 粘贴 到 指定 的 矩形 区 域 。 其 中 data 为 像素 值 。 

【 例 5-19】 获取 图 片 的 所 有 像素 。 
function draw() ( 

var c = document.getElementBylId("canvas]"); 
if (c = null) retum false; 
var context  c.getContext('2d"); 
var image — new Image(); 
image.src = 'img/2.png": 
image.onload = function()( 
var imagedata; 
context.drawImage(image.0.0); 
imagedata = context.getImageData(0.0.image.width,image.height); 



































} 


} 
运行 以 上 程序 ， 效 果 如 图 5-28 所 示 。 














图 5-28 获取 图 片 的 所 有 像素 
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5.6.3 组 合 图 形 











前 面 的 示例 都 是 展示 单个 图 形 的 绘制 ， 但 在 实际 应 上 








H, 更 多 的 是 复杂 图 形 的 绘制 ， 比 


如 把 一 个 图 形 重 又 绘制 在 另 一 个 图 形 的 上 面 ， 但 图 形 中 能 够 被 看 到 的 部 分 完全 取决 于 图 形 的 
绘制 顺序 。 又 如 ， 对 两 个 图 形 进行 组 合 ， 并 自己 决定 以 何 种 方式 进行 组 合 。 这 时 需要 使 用 到 


canvas 的 图 形 /图 像 组 合 技术 。 

















HTMLS 有 11 种 图 形 组 合 方式 ， 只 要 将 其 赋值 给 context.globalCompositeOperation 即 可 。 


使 用 方法 为 : 
context.globalCompositeOperation = type 
11 种 图 形 组 合 方式 如 表 5-3 所 示 。 


表 5-3_11 种 图 形 组 合 方式 











组 合 方式 含义 

source-over 在 目标 图 像 上 显示 源 图 像 

source-atop. 在 目标 图 像 的 顶部 显示 源 图 像 。 源 图 像 位 于 目标 图 像 之 外 的 部 分 是 不 可 见 的 

E 在 目标 图 像 中 显示 源 图 像 。 只 有 目标 图 像 之 内 的 源 图 像 部 分 会 显示 ， 目 标 图 
像 是 透明 的 

mE 在 目标 图 像 之 外 显示 源 图 像 。 只 有 目标 图 像 之 外 的 源 图 像 部 分 会 显示 ， 目 标 
图 像 是 透明 的 

destination-over 在 源 图 像 上 显示 目标 图 像 

destination-atop 在 源 图 像 的 项 部 显示 目标 图 像 。 目 标 图 像 位 于 源 图 像 之 外 的 部 分 是 不 可 见 的 

die 在 源 图 像 中 显示 目标 图 像 。 只 有 源 图 像 之 内 的 目标 图 像 部 分 会 显示 ， 源 图 像 
是 透明 的 

nm 在 源 图 像 之 外 显示 目标 图 像 。 只 有 源 图 像 之 外 的 目标 图 像 部 分 会 显示 ， 源 图 
像 是 透明 的 

lighter sili 

copy 1 

xor 使 用 异 或 操作 对 源 图 像 和 目标 图 像 进 行 组 合 





【 例 5-20】 11 种 图 形 组 合 效果 预览 。 
<title> 图 形 组 合 </title> 


<script type="text/javascript" charset="gb2312"> 
function draw() { 


/获取 选择 的 图 形 组 合 方式 
var selectComponent = document.getElementBylId("selectCombineMethod"); 
/取得 选择 的 索引 
var selectedIndex = selectComponent.selectedIndex: 
/得 到 选择 的 值 ， 也 就 是 选择 的 图 形 组 合 方式 
var selectedCombinedStrategy = selectComponent.options[selectedIndex].value; 
var c = document.getElementByld('canvasl"); 
if (c = null) 
retum false; 
var context = c.getContext('2d'); 
/ 画 一 个 蓝 色 正方 形 
context fillStyle = "blue": 
context.fillRect(40, 40, 60, 60): 
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// 将 选择 的 图 形 组 合 方式 设 定 到 context 中 

context.globalCompositeOperation = selectedCombinedStrategy; 

// 画 一 个 红色 的 贺 ，context 会 根据 图 形 的 组 合 方式 来 决定 如 何 绘制 这 两 个 图 形 
context beginPath(): 

context fillStyle = "red": 

context.arc(40 + 60, 40 + 60, 30, 0, Math.PI * 2, false); 


context.fill(): 
} 
</script> 
</head> 
<body onload="drawO"> 


<h2>canvas: 显示 组 合 图 形 </h2> 

<!-- 创建 一 个 下 拉 列 表 ， 让 用 户 选择 以 什么 方式 来 组 合 图 形 一 

<l- 一 旦 选择 ， 就 会 触发 onchange 事件 ， 调 用 draw 方法 进行 绘制 -> 

«select id-"selectCombineMethod" onchange="draw()"> 
«option »source-atop-/option- 
«option»source-in-/option- 
«option»source-out-/option 
«option»source-over-/option-- 
«option»destination-atop-/option^ 
«option»destination-in-/option- 
«option»destination-out-/option-- 
«option»destination-over-/option-- 
«option»lighter-/option 
<option>copy</option> 
<option>xor</option> 
</select> 

<br><br> 

«canvas id="canvas1" width="1000" height="1000"> 

您 的 浏览 器 不 支持 HTML5 canvas 标签 。 

</canvas> 

</body> 
运行 以 上 程序 ， 效 果 如 图 5-29 Pros. 


e QC fi (1270.0.1:8020/ch( 7^ 


canvas: 显示 组 合 图 形 
Source-atop Y 





图 5-29 图 形 的 组 合 效果 
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56.4 ”混合 图 像 


混合 模式 是 指 将 上 层 的 图 像 融 入 下 层 的 图 像 时 采用 的 各 种 模式 。 根 据 所 选 的 模式 ， 可 以 
看 到 不 同 的 融合 后 的 效果 。 

混合 模式 采取 铺设 在 彼此 项 部 的 两 个 像素 ， 并 结合 它们 不 同 的 方式 进行 展现 ， 例 如 较 深 
的 颜色 混合 模式 只 会 呈现 两 个 像素 的 颜色 较 深 。 在 扩展 到 整个 图 像 时 , 混合 模式 可 以 产生 一 
些 令 人 人 惊艳 的 效果 。 

图 像 混 合 需要 用 到 canvas 元 素 的 globalCompositeOperation 属性 ， 使 用 方法 为 : 

context globalCompositeOperation=" 属 性 值 " 
其 中 ， 属 性 值 有 12 个 取 值 ， 如 表 5-4 所 示 。 


表 5-4_ 图像 的 混合 模式 















































属性 值 含义 
normal 无 混合 
darken 






实现 变 暗 模式 ， 逐 像素 对 比 基 色 和 混合 色 ， 保 慷 深 颜色 ， 去 除 浅 颅 色 
实现 变 亮 模式 ， 逐 像素 对 比 基 色 和 混合 色 ， 保 贸 浅 皮 色 ， 去 除 深 颜色 
实现 正片 总 底 模式 ， 逐 像素 对 比 基 色 和 混合 色 ， 对 基色 的 灰 度 级 与 混合 色 的 灰 度 
multiply 级 进行 乘法 计算 ， 获 得 灰 度 级 更 低 的 颜色 并 使 之 成 为 合成 后 的 颜色 

实现 滤 色 模式 ， 与 正片 过 底 模 式 相反 ， 滤 色 模式 对 上 下 两 层 图 层 像素 项 色 的 灰 度 





lighten 





dum 级 进行 乘法 计算 ， 获 得 灰 度 级 更 高 的 颜色 并 使 之 成 为 合成 后 的 颜色 

color-bum SEU PREX, ERREA E, AER, ORGANUM, 

color-dodge KEARE, ERREA, AERE, ARAR 

ard ligit 实现 强 光 模式 ， 对 两 幅 图 像 进行 逐 像素 比较 ， 如 果 混合 色 的 灰 度 级 小 于 或 等 于 
0.5， 采 用 正片 登 底 模式 ， 否 则 采用 滤 色 模式 

uu 把 混合 色 以 柔 光 的 方式 混合 到 基色 中 ， 若 基色 的 灰 阶 趋 于 高 或 低 ， 就 会 将 颜色 合 
成 结果 的 阶 调 调整 为 趋 于 中 间 的 灰 阶 调 ， 获 得 色彩 比较 柔和 的 合成 效果 

d 实现 登 加 模式 ， 对 两 幅 图 像 进行 逐 像素 比较 ， 如 果 混 合 色 的 灰 度 级 小 于 或 等 于 
0.5， 采 用 正片 炙 底 模式 ， 否 则 采用 渡 色 模式 

ee 实现 差 值 模式 ， 对 混合 色 和 基色 的 RGB 值 中 的 每 个 值 分 别 进行 比较 ， 用 高 值 减 
去 低 值 作为 合成 后 的 颜色 

实现 排除 模式 ， 与 差 值 模式 的 作用 类 似 ， 只 是 排除 模式 的 结果 色 的 对 比 度 没有 差 


值 模式 强 


【 例 5-21】 图 像 混 合 。 
function draw() { 
var c = document.getElementBylId("canvas1"); 
if(c — null) retum false; 
var context = c.getContext(2d"): 
context.globalCompositeOperation — "darken": 
var image = new Image(); 
image.src = "img/A jpg"; 
image.onload = function()( 
context.drawImage(image.0.0): 
var image? = new Image(): 
image2.src = "img/2 png": 
image2 onload = function() 
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context.drawImage(image2.0.0); 
x 
h 
} 
运行 以 上 程序 ， 效 果 如 图 5-30 所 示 。 





图 5-30 ”图像 混合 效果 


5 绘制 文字 


TE HTMLS 中 ， 可 以 在 canvas 中 进行 文字 的 绘制 ， 还 可 以 指定 所 绘制 文字 的 字体 、 大 小 、 
对 齐 方式 ， 以 及 进行 文字 的 纹理 填充 等 。 绘 制 文字 时 可 以 使 用 flText 或 stokeText 方法 。 


5.7.1 绘制 填充 文字 


fillText 方法 用 填充 的 方式 绘制 字符 串 ， 使 用 格式 如 下 : 
void fill Text(text.x.y. [max Width]): 
该 方法 接受 4 个 参数 ， 第 一 个 参数 test 表示 要 绘制 的 文字 ， 第 二 个 参数 x 表示 绘制 文字 
的 起 点 横 坐 标 ， 第 三 个 参数 y 表示 绘制 文字 的 起 点 纵 坐标 ， 第 四 个 参数 maxWidth 为 可 选 参 
数 ， 表 示 显 示 文 字 时 的 最 大 宽度 ， 可 以 防止 文字 溢出 。 


5.7.2 文字 相关 属性 


在 使 用 canvas 进行 文字 的 绘制 之 前 ， 可 以 先 对 有 关 文 字 绘制 的 属性 进行 设置 ， 这 些 属 性 
如 下 : 

e font: 指定 正在 绘制 的 文字 的 样式 。 如 果 要 在 绘制 文字 时 改变 字体 样式 ， 只 需要 更 改 
font 属性 的 值 即 可 。 默 认 的 字体 样式 为 10px sans-serif。 例 如 : 
context.font — "20pt Times New Roman": 

e textAlign: 指定 正在 绘制 的 文字 的 对 齐 方式 ， 有 left( 左 对 齐 )、right( 右 对 齐 )、center( 居 
中 对 齐 )、start( 如 果 文 字 从 左 往 右 排版 ， 则 左 对 齐 ; 如 果 从 右 往 左 排 版 ， 则 右 对 齐 ) 
和 (效果 和 start 对 齐 方 式 正好 相反 )5 种 对 齐 方式 ， 默 认为 start。 
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5.7.3 ”绘制 轮廓 文字 


strokeText 方法 可 以 用 轮廓 方式 绘制 字符 串 ， 格 式 如 下 : 
void stroke Text(text.x.y.[max Width]): 
该 方法 的 参数 与 HText 方法 相同 。 


5.74 ”获取 文字 宽度 
可 以 使 用 图 形 上 下 文 对 象 的 measureText 方法 得 到 文字 的 宽度 ， 使 用 格式 如 下 ; 


metrics = context.measure Text(text); 
measureText 方法 接受 一 个 参数 text, 该 参数 为 需要 绘制 的 文字 , 该 方法 返回 一 个 TextMetrics 
对 象 ，TextMetrics 对 象 的 width 属性 表示 使 用 当前 指定 的 字体 后 ， 在 text 参数 中 指定 的 文字 
的 总 宽度 。 


5.75 “文字 绘制 实战 


下 面 使 用 刚才 介绍 的 绘制 文字 的 方法 绘制 一 些 文字 。 
【 例 5-22】 绘制 填充 文字 、 轮 廓 文字 ， 获 取 文 字 宽度 并 显示 。 
<head> 
<meta charset="UTF-8"> 
«title-HTMLS canvas 绘制 文本 文字 入 门 示 例 </title> 
</head> 
<body> 
<!-- 添加 canvas 标签 ， 并 加 上 红色 边框 以 便 在 页 面 上 查看 --> 
«canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red:"> 
您 的 浏览 器 不 支持 canvas 标签 。 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("myCanvas"); 
/简单 地 检测 当前 浏览 器 是 否 支持 canvas 对 象 ， 以 免 在 一 些 不 支持 HIMLS 的 浏览 器 中 
/提示 语法 错误 
if (canvas.getContext) ( 
/获取 对 应 的 CanvasRenderingContext2D 对 象 (画笔 ) 
var ctx = canvas.getContext("2d"); 
/设置 字体 样式 
ctx.font — "30px Courier New": 
/设置 字体 填充 颜色 
ctx.fillStyle = "blue": 
/从 坐标 点 (50.50) 开 始 绘制 文字 
ctx.fillText("CodePlayer+ 中 文 测试 ", 50, 50); 
/绘制 轮廓 字符 
ctx.font — "bold 30px sans-serif": 
/轮廓 字符 
ctx_strokeText(" 轮 廓 字符 ".50.100): 
ctx.font = "20px Courier New": 
/定义 绘制 文字 
var txt = "字符 串 的 宽度 为 :"; 
/获取 文字 宽度 
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var tml = ctx.measureText(txt): 


/| 绘制 文字 
ctx.fillText(txt.50,150): 
ctx.fillText(tm1.width,tm1.width+50,150); 
j 
</script> 


</body> 
运行 以 上 程序 ， 效 果 如 图 5-31 所 示 。 


D) HTMLS canaseMYs x WEN 
€ Q | © 1270.0.1:8020/ch05/5-22 html 





CodePlayer+ 中 文 测试 
轮 序 字符 


字符 串 的 宽度 为 :152 .001953125 














图 5-31 文字 绘制 效果 


58 本章 小 结 


canvas 是 HIMLS 的 一 个 新 增 元 素 , 提供 了 一 个 允许 开发 人 员 在 网 页 上 绘制 图 形 的 接口 。 
开发 人 员 要 在 网 页 上 绘制 图 形 时 ， 首 先 在 页 面 上 放置 一 个 canvas 元 素 ， 就 相当 于 在 页 面 上 放 
置 了 一 块 画布 ， 然 后 在 这 块 画布 上 绘制 图 形 。 本 章 主要 介绍 了 使 用 canvas 元 素 绘图 的 基础 知 
识 ， 然 后 介绍 了 绘制 简单 图 形 、 贝 塞 尔 曲线 、 变 形 图 形 、 多 效果 图 形 以 及 文字 的 方法 ， 另 外 
还 介绍 了 使 用 canvas 对 图 像 进 行 处 理 的 方法 ， 包 括 图 像 裁剪 、 像 素 处 理 、 组 合 图 形 和 混合 图 
像 。 对 于 有 意 从 事 图 形 /图 像 学 的 读者 ， 这 一 章 必须 掌握 。canvas 也 是 网 页 游戏 、 网 上 三 维 制 
图 的 基础 。 


5.9 思考 和 练习 


- 向 一 个 页 面 添加 canvas 元 素 ， 命 名 为 canvas1。 添 加 的 时 候 ， 需 要 检测 浏览 器 是 否 支 持 。 
. 绘制 一 个 100*100 像素 的 红色 矩形 。 
. 简 述 进行 canvas 绘图 时 用 到 的 坐标 系 。 
. 请 在 页 面 上 添加 一 个 canvas 元 素 ， 在 其 中 绘制 一 个 矩形 、 一 条 直线 、 一 条 弧 线 、 
个 圆 形 和 一 个 三 角形 。 

5. 在 绘制 图 像 时 ， 如 何 使 用 保存 和 恢复 canvas 状态 的 技术 来 绘制 变形 图 形 ? 

6. 掌握 图 像 裁 剪 的 方法 ， 并 写 出 一 个 程序 。 
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Web 上 的 多 媒体 应 用 经 历 了 重大 改进 ， 从 最 初 简单 的 MIDI 和 GIF 动画 ， 发 展 到 现在 随 
处 可 见 的 MP3 音乐 、Flash 动画 和 各 种 在 线 视频 ， 同 时 也 产生 了 用 于 播放 多 媒体 内 容 的 各 种 
工具 和 插件 ， 如 Windows Media Player. Flash Player. Real Player ^5. HTMLS 中 多 媒体 播放 
功能 的 出 现 ， 给 原 有 的 这 些 工具 或 插件 带 来 相当 大 的 挑战 。 可 以 想象 ， 用 户 如 果 不 需 要 安装 
任何 插件 或 工具 就 能 在 网 页 中 直接 播放 音频 和 视频 ， 该 是 多 么 美好 的 体验 ! 从 这 一 点 来 说 ， 
HTMLS 新 增 的 audio 和 video 元 素 ， 让 HTMLS 的 媒体 应 用 多 了 新 的 选择 ， 开 发 人 员 不 必 使 
用 插件 就 能 播放 音频 和 视频 ， 这 给 插件 或 工具 带 来 了 巨大 冲击 。 对 于 这 两 个 元 素 ，HIMLS 
规范 提供 了 通用 、 完 整 、 可 脚本 化 控制 的 API 供 开 发 人 员 使 用 。 
本 章 将 讨论 如 何在 HTMLS 中 实现 音频 和 视频 的 播放 及 控制 ， 介 绍 如 何 使 用 HIMLS 的 
两 个 重要 元 素 一 一 audio 和 video 来 创建 支持 音频 和 视频 播放 及 控制 功能 的 Web 应 用 和 APP: 
演示 如 何 通过 API 编程 的 方式 来 控制 页 面 中 的 音频 和 视频 ， 最 后 探讨 HIML5 audio 和 video 
元 素 在 实际 项 目 中 的 应 用 。 

本 章 学 习 目 标 : 

e 掌握 音频 和 视频 解码 器 的 基本 理论 

e 学 会 检测 浏览 器 对 音频 和 视频 格式 的 支持 

o 熟悉 audio 和 video 元 素 的 使 用 ， 学 会 用 JavaScript 脚本 来 控制 audio 和 video 元 素 的 

播放 
e 掌握 为 音频 和 视频 添加 字幕 的 方法 
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根据 HTMLS 的 官方 标准 ， 并 不 需要 为 任何 特定 的 音频 或 视频 格式 提供 支持 ， 所 以 浏览 
器 厂商 可 以 选择 希望 支持 的 格式 。 然 而 ， 最 好 未 来 能 有 一 个 固定 的 标准 ， 从 而 结束 现在 这 种 
混乱 的 局 面 。 毕 竞 对 于 开发 者 来 说 ， 并 不 希望 多 做 一 些 对 媒体 文件 重新 编码 的 工作 。 未 来 ， 
一 定 会 越 来 越 简化 ， 简 单 化 才 是 真正 的 进步 ， 大 道 至 简 ， 这 也 是 HTMLS 受 欢迎 并 大 有 前 途 
的 原因 之 一 。 不 过 ， 现 在 还 有 多 种 媒体 格式 ， 所 以 你 仍然 需要 熟知 各 种 能 够 被 HTMLS 支持 
的 媒体 格式 ， 并 了 解 各 浏览 器 目前 对 这 些 格式 的 兼容 性 问题 。 

不 论 是 音频 文件 还 是 视频 文件 , 实际 上 都 是 容器 文件 , 这 点 类 似 于 压缩 了 一 组 文件 的 ZIP 
文件 。 视 频 文件 (视频 容器 ) 包 含 音 频 轨道 、 视 频 轨 道 和 其 他 一 些 元 数据 。 视 频 播放 时 ， 音 频 
轨道 和 视频 轨道 绑 定 在 一 起 。 元 数据 部 分 包含 视频 的 封面 、 标 题 、 子 标题 、 字 母 等 相关 信息 。 

音频 和 视频 的 编 解码 器 是 一 组 算法 ， 用 来 对 一 段 特定 音频 或 视频 流 进行 解码 和 编码 ， 以 
便 音频 和 视频 能 够 播放 。 原 始 的 媒体 文件 体积 非常 大 ， 如 果 不 进行 编码 ， 构 成 一 段 视频 和 音 
频 的 文件 就 非常 大 ， 在 互联 网 上 传播 需要 耗费 大 量 时 间 。 如 果 没 有 解码 器 ， 接 收 方 就 不 能 
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编码 过 的 数据 重组 为 原始 的 媒体 数据 。 编 解码 器 可 以 读 懂 特定 的 容器 格式 ， 并 且 对 其 中 的 音 
频 轨 道 和 视频 轨道 解码 。 


6.1.1 关于 编 解码 器 


音频 文件 和 视频 文件 其 实 只 是 容器 文件 ， 其 中 包含 音频 和 视频 的 音频 轨道 、 视 频 轨道 和 
其 他 元 数据 。 元 数据 可 以 是 音频 或 视频 的 标题 、 子 标题 、 作 者 、 艺 术 家 、 字 母 等 信息 。 

编 解 码 器 的 作用 是 读 取 特 定 的 容器 格式 ， 并 对 其 中 的 音频 和 视频 轨道 进行 解码 ， 然 后 实 
现 播放 。 大 多 数 编码 器 对 原始 音频 和 视频 文件 进行 了 有 损 压 缩 ， 以 求 得 更 小 的 文件 大 小 和 更 
高 的 压缩 比 。 无 损 压缩 文件 大 ， 因 此 在 互联 网 中 没什么 优势 。 


6.1.2 ”音频 编 解 码 器 


这 里 主要 介绍 几 种 常用 的 音频 编 解码 器 。 

1. AAC(Advanced Audio Coding， 高 级 音频 编码 ) 

AAC 于 1997 年 标准 化 , 基于 MPEG-2 音频 编码 技术 ， 当 时 苹果 将 其 作为 iTunes 的 默认 
存储 格式 ， 因 此 得 以 举世 闻名 并 广泛 应 用 。 

AAC 可 以 按 任意 比特 率 进行 编码 ， 通 常情 况 下 压缩 比 为 18:1， 比 MP3 胜出 很 多 。MP3 
只 能 将 比特 率 限 制 在 一 定 范围 内 。 理 论 上 ，AAC 能 够 编码 高 达 48 个 声 道 ， 而 且 支 持 自 定义 
多 个 配置 文件 ， 以 适应 不 同 配置 的 计算 机 和 不 同 速率 的 网 络 环境 。 如 果 使 用 高 配 ， 则 能 够 在 
相同 比特 率 下 提高 音质 ， 但 也 意味 着 编 解 码 比较 费时 。 

目前 ， 芋 果 产 品 、 索 尼 产 品 、 索 尼 Walkman、 任 天 堂 NDSi 和 魅族 手机 等 MP3 播放 器 都 
支持 AAC。 此 外 ， 计 算 机 上 如 果 安 装 过 AAC 解码 器 ， 那 么 很 多 音乐 播放 软件 也 都 能 支持 
AAC。AAC 在 移动 电话 领域 得 到 普遍 支持 。 

2. MPEG-1 音频 层 3 

MPEG-1 音频 层 3 经 常 被 称 为 MP3， 是 比较 流行 的 一 种 音频 格式 ， 是 一 种 数字 音频 编码 
的 有 损 压 缩 格式 ， 可 以 减少 音频 数据 量 ， 但 听觉 效果 并 不 比 原始 音频 有 明显 下 降 ， 因 此 被 广 
泛 应 用 在 互联 网 中 。 注 意 ，MPEG-1 音频 层 3 并 非 MPEG-3. 

MP3 最 多 支持 两 个 声 道 ， 可 以 被 编码 为 不 同 的 比特 率 ， 范 围 为 32Kbps 一 320Kbps， 典 型 
的 比特 率 介 于 128Kbps 一 320Kbps， 而 CD 上 未 压缩 的 音频 比特 率 为 1411.2Kbps。MP3 可 以 
在 文件 编码 时 动态 改变 比特 率 ， 即 使 用 “可 变 码 率 ”技术 ， 在 声音 变 小 的 部 分 使 用 较 小 的 比 
特 率 ， 在 声音 变化 较 大 的 部 分 使 用 较 大 的 比特 率 ， 方 法 是 将 音频 切 分 为 比特 率 不 同 的 帧 。 

MP3 并 未 规定 精确 的 编码 规范 ， 但 详细 地 定义 了 解码 算法 和 文件 格式 。 因 此 ， 尽 管 编码 
方式 很 多 ， 但 都 可 以 使 用 同一 播放 器 解码 。 

3. Ogg Vorbis 

Ogg 指 的 是 一 种 文件 格式 或 “容器 ?”， 自 由 且 开放 标准 ， 在 其 中 可 以 放 入 各 种 编码 器 。 
Oggi Vorbis 指 的 就 是 将 Vorbis 编码 的 音效 包含 在 Ogg 容器 中 之 后 形成 的 格式 。 后 来 Oggi 通 
常 指 Ogg Vorbis 这 种 音频 文件 格式 ， 而 在 此 之 前 ，.ogg 这 一 扩展 名 被 用 在 任何 Oggi 支持 格 
式 的 内 容 中 ，2007 年 才 决定 只 留 给 Vorbis 使 用 。 
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4. WAV 

WAV 为 微软 公司 开发 的 一 种 声音 文件 格式 ， 符 合 RIFF(Resource Interchange File Format) 
文件 规范 ， 用 于 保存 Windows 平台 的 音频 信息 资源 ， 被 Windows 平台 及 其 应 用 程序 广泛 支 
持 ， 该 格式 也 支持 MSADPCM、CCITT A LAW 等 多 种 压 扩 算法 ， 支 持 多 种 音频 数字 、 取 样 
频率 和 声 道 。 标 准 格式 化 的 WAV 文件 和 CD 格式 一 样 ， 也 采用 44.1Kbps 的 取样 频率 ，16 位 
量化 数字 ， 因 此 声音 文件 的 质量 和 CD 相差 无 几 。 

总 的 来 说 ，WAV 格式 音质 最 好 ， 但 是 文件 体积 较 大 ，MP3 压缩 率 较 高 ， 普 及 率 高 ， 音 
质 相 比 WAV 3225; Ogg 与 MP3 在 相同 位 速率 编码 的 情况 下 ，Ogg 体积 更 小 , 并 且 Ogg 是 免 
费 的 ， 不 用 交 专 利 费 。 


6.1.3 ”视频 编 解 码 器 


1. H.264 

H.264 是 由 国际 电信 联盟 8TU-T) 的 视频 编码 专家 组 和 ISO/IEC 的 MPEG( 活 动 图 像 编 码 专 
家 组 ) 联 合 组 成 的 联合 视频 组 开发 的 一 个 数字 视频 编码 标准 。 

国际 上 制定 视频 编 解 码 技术 的 组 织 有 两 个 : 一 个 是 国际 电信 联盟 ITU-T), 它 制定 的 标准 
有 HH261、H.263、H.263+ 等 ;， 另 一 个 是 国际 标准 化 组 织 ISO)， 它 制定 的 标准 有 MPEG-1、 
MPEG-2、MPEG-4 等 。H.264 则 是 由 这 两 个 组 织 联合 组 建 的 联合 视频 组 (JVT) 共 同 制定 的 新 
的 数字 视频 编码 标准 ， 所 以 它 既是 ITU-T 的 HH264， 又 是 ISO/IEC 的 MPEG-4 高 级 视频 编码 
(Advanced Video Coding，AVC) 的 第 10 部 分 。 因 此 ， 不 论 是 MPEG-4 AVC, MPEG-4 Part 10, 
还 是 ISO/IEC 14496-10， 都 是 指 H.264. 

H.264 是 在 MPEG-4 技术 基础 之 上 建立 起 来 的 ， 其 编 解 码 流程 主 要 包括 5 个 部 分 : 帧 间 
和 帧 内 预测 (Estimation)、 变 换 (Transform) 和 反 变换 、 量 化 (Quantization) 和 反 量化 、 环 路 滤波 
(Loop Filter)、 燃 编码 (Entropy Coding). 

H.264 标准 与 其 他 现 有 的 视频 编码 标准 相 比 ， 在 相同 的 带宽 下 能 提供 更 加 优秀 的 图 像 质 
it. H.264 最 大 的 优势 是 具有 很 高 的 数据 压缩 比率 ,在 同等 图 像 质量 的 条 件 下 ，H.264 的 压缩 
比 是 MPEG-2 的 两 倍 以 上 , 是 MPEG-4 的 1.5—2 倍 。 正 因为 如 此 , 经 过 HH264 压缩 的 视频 数 
据 ， 在 网 络 传输 过 程 中 需要 的 带宽 更 少 ， 也 更 加 经 济 。 因 此 ，H.264 被 广泛 应 用 于 光盘 存储 、 
数字 电视 、 网 络 电视 、 通 信和 与 多 媒体 方面 。 

2. Ogg Theora 

21 世纪 初 ，On2 公司 将 VP3 放 入 了 公共 领域 。Theora 对 VP3 做 了 大 量 改进 ， 最 后 形成 
了 一 种 完全 免费 、 完 全 开源 的 视频 格式 。 

Theora 是 开放 且 免 费 的 视频 压缩 编码 技术 ， 由 Xiph 基金 会 发 布 。 作 为 该 基金 会 Ogg 项 
目的 一 部 分 ,从 VP3 HD 高 清 到 MPEG-4/DiVX 格式 都 能 够 被 Theora 很 好 地 支持 。 使 用 Theora 
无 需 任何 专利 许可 费 。 Firefox 和 Opera 通过 新 的 HIMLS 元 素 提供 对 Ogg/Theora 视频 的 原生 
支持 。 

相对 于 H.264 格式 ，Theora 的 优势 在 于 没有 所 谓 的 专利 授权 费 ， 同 时 性 能 也 和 H.264 不 
相 上 下 。 在 这 个 专利 大 战 满 天 飞 的 时 代 , 似乎 Theora 是 多 快 好 省 的 选择 , 但 事实 却 比较 残酷 。 
正 是 由 于 Theora 完全 人 免费、 完全 开源 , 导致 没有 领导 地 位 的 厂商 支持 , 造成 很 多 厂商 对 Theora 
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未 来 不 确定 性 疑虑 的 加 剧 。 与 终端 厂商 不 同 ， 消 费 者 根本 不 会 关心 要 看 的 视频 是 H.264 还 是 
Theora 的 ， 他 们 只 关心 视频 能 不 能 播放 。 微 软 和 苹果 是 H264 的 专利 持 有 人 ， 没 有 任何 理由 
让 微软 的 TE 浏览 器 和 苹果 的 iOS 设备 去 支持 Theora， 而 视频 分 享 网 站 为 了 自己 的 利益 也 无 
法 大 规模 使 用 。 最 后 ，Theora 成 了 “瓷器 ” 

正 是 缘 于 Theora 免费 、 开 源 带 来 的 压力 ，2010 年 下 半年 H.264 专利 公司 MPEG-LA 公 
司 宣布 H.264 永久 免费 ， 未 来 不 会 再 收取 专利 费 。HTMLS5 时 代 最 终 以 Theora 被 牺牲 的 惨痛 
代价 换 来 了 短暂 的 统一 。 

3. VP8 

VP8 由 On2 公司 于 2008 年 9 H 13 日 推出 , 目的 是 取代 其 前 任 VP7 视频 编 解 码 器 。 2009 
年 Google 收购 On2 公司 , F 2010 4 5 H 19 日 宣布 将 VP8 以 BSD 许可 证 的 形式 开源 , 从 此 
以 后 ，VP8 便 成 了 一 个 免 版 权 费 、 可 自由 使 用 的 技术 ， 任 何 使 用 都 不 受 专利 限制 。 从 这 时 候 
起 ，Google 也 开始 启动 WebM 项 目 , 目标 是 构建 一 种 开放 且 免 版 权 费 的 视频 文件 格式 ,提供 
高 质量 的 视频 压缩 以 适应 HIMLS 的 需要 。WebM 项 目 采用 VP8 视频 编 解码 器 和 Vorbis 音频 
编 解码 器 ， 其 封装 格式 以 Matroska 格式 为 基础 。 


62 ”浏览 器 音 视频 支持 检测 


HTMLS 一 开始 想 要 统一 音 视频 编 解码 器 ， 现 在 放弃 了 对 编码 器 的 要 求 ， 开 发 人 员 能 够 
做 的 就 是 熟悉 各 种 浏览 器 的 支持 情况 , 针对 不 同 的 浏览 器 环境 对 媒体 文件 进行 重 编码 。 因 此 ， 
在 HTMLS 中 使 用 音频 和 视频 之 前 ， 需 要 先 检测 浏览 器 对 音频 格式 和 视频 格式 的 支持 情况 。 

HTMLS audio 元 素 支 持 的 格式 有 WAV, MP3 和 Ogg, 各 大 浏览 器 的 支持 情况 如 表 6-1 所 示 。 




















表 6-1 不 同 浏览 器 对 audio 元 素 的 支持 情况 


Ogg 





不 同 浏览 器 对 HTMLS video 元 素 的 支持 情况 如 表 6-2 所 示 。 


表 6-2 不 同 浏览 器 对 video 元 素 的 支持 情况 
浏览 器 | 影音 格式 
Microsoft Internet Explorer 9 
Mozilla Firefox 5+ 
Google Chrome 13+ 
Apple Safari 5+ 
Opera 11+ 


在 HTMLS 下 检测 浏览 器 是 否 支持 audio 或 video 元 素 , 最 简单 的 方式 是 用 脚本 动态 创建 
它 ， 然 后 检测 特定 函数 是 否 存在 。 
var hasVideo = !!(document.createElement('video").canPlay Type): 
上 述 语句 会 动态 创建 一 个 video 元 素 ， 然 后 检查 canPlayType 函数 是 否 存 在 。 通 过 “1 


WebM 
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运算 符 将 结果 转换 成 布尔 值 ， 即 可 检测 视频 对 象 是 否 已 创建 成 功 。 

如 果 检 测 结果 是 浏览 器 不 支持 audio 或 video 元 素 ， 那 么 需要 针对 这 些 旧 的 浏览 器 触发 
另外 一 套 脚 本 来 向 页 面 中 引入 媒体 标签 ， 如 使 用 Flash 等 其 他 播放 技术 来 替代 。 

另外 ， 可 以 在 audio 或 video 元 素 中 放 入 备 选 内 容 ， 如 果 浏 览 器 不 支持 该 元 素 ， 这 些 备 
选 内 容 就 会 显示 在 元 素 对 应 的 位 置 。 可 以 把 以 Flash 插件 方式 播放 同样 视频 的 代码 作为 备 选 
内 容 。 如 果 仅仅 想 显示 一 条 文本 形式 的 提示 信息 替代 本 应 显示 的 内 容 ， 可 在 audio 或 video 
元 素 中 按 下 面 这 样 插入 信息 ， 代 码 如 下 : 

«video src-"video.ogg" controls 
您 的 浏览 器 不 支持 HTMLS video 元 素 。 


</video> 








如 果 要 为 不 支持 HTMLS 媒体 的 浏览 器 提供 可 选 方式 来 显示 视频 , 可 以 使 用 相同 的 方法 ， 
将 以 插件 方式 播放 视频 的 代码 作为 备 选 内 容 ， 放 在 相同 的 位 置 即 可 ， 代 码 如 下 : 


«video src="video.ogg"> 


«object data-"videoplayer.swf" type="application/x-shockwave-flash"> 
«param name="movie" value-"video.swf"/^ 


</object> 
</video> 


在 video 元 素 中 嵌入 显示 Flash 视频 的 object 元 素 之 后 ， 如 果 浏 览 器 支持 HTMLS 视频 ， 
那么 HIMLS 视频 会 优先 显示 ，Flash 视频 作为 后 备 。 不 过 在 HTMLS 被 广泛 支持 之 前 ， 可 能 


需要 提供 多 种 视频 格式 。 


【 例 6-1】 以 下 代码 检测 Chrome 浏览 器 对 常用 音 视 频 格式 的 支持 情况 。 


<head> 


«meta charset="UTF-8"> 
<title> 音 视频 支持 检测 </title> 
«script type="text/javascript"> 
function checkAudio() 
var myAudio = document.createElement('audio"); 
if(myAudio.canPlayType)( 
if(""-myAudio.canPlayType('audio/mpeg") ( 


document. write(" 您 的 浏览 器 支持 MP3 编码 。<br />"); 


b 
if(""!—myAudio.canPlay Type('audio/ogg:codecs-" vorbis"")) ( 
document. write(" 您 的 浏览 器 支持 ogg 编码 。<br />"); 
} 
if{""!=myAudio.canPlayType('audio/mp4;codecs="mp4a.40.5")){ 
document. write(" 您 的 浏览 器 支持 aac 编码 。<br />"); 
} 
Jelse{ 
document.write(" 您 的 浏览 器 不 支持 要 检测 的 音频 格式 。"); 
} 
} 


function checkVedio()( 
var myVideo = document.createElement(" video"); 
if(myVideo.canPlayType)( 
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if(""I—myVideo.canPlayType( video/mp4:codecs-"avc1.64001E") ( 
document write(" 您 的 浏览 器 支持 h264 fld. <br/>"); 

H 

if(""!—myVideo.canPlayType( video/ogg:codecs-"vp8")) ( 
document write(" 您 的 浏览 器 支持 vp8 编码 。<br />"); 

} 

if(""!—myVideo.canPlayType('video/ogg:codecs-"theora"")) ( 
document. write(" 您 的 浏览 器 支持 theora ihg. <br/>"); 

} 

jelet 
document.write(" 您 的 浏览 器 不 支持 要 检测 的 视频 格式 。"); 


本 书 使 用 的 Chrome 浏览 器 的 版 本 是 44.0.2403.157， 运 行 以 上 程序 ， 可 以 看 到 该 版 本 浏 
览 器 对 常用 音 视频 格式 的 支持 情况 ， 效 果 如 图 6-1 所 示 。 


12700180201chGe/in= x 





图 6-1 Chrome 浏览 器 对 常用 音 视频 格式 的 支持 情况 


6.3 audio 与 video 元 素 





本 节 主 要 介绍 HTMLS 中 audio 和 video 元 素 的 使 用 。 顾名思义 ， 前 者 支持 音频 播放 ， 后 
者 支持 视频 播放 。 


6.3.1 audio 元 素 


目前 仍然 不 存在 一 项 则 在 网 页 上 播放 音频 的 标准 。 在 HTMLS 之 前 ， 大 多 数 音频 是 通过 
插件 (如 Flasb) 来 播放 的 。 然 而 ， 并 非 所 有 浏览 器 都 拥有 同样 的 插件 。 因 此 ，HIMLS 规定 了 
在 网 页 上 嵌入 音频 元 素 的 标准 ， 即 使 用 audio 元 素 。 

1. audio 元 素 的 使 用 格式 


audio 元 素 的 使 用 格式 如 下 : 
<audio controls> 
«source src-"horse.ogg" type-"audio/ogg"- 
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<source src-"horse.mp3" type-"audio/mpeg"-- 
«source src-"horse.wav" type-"audio/wav" 
您 的 浏览 器 不 支持 audio 元素 。 











</audio> 
运行 上 述 代 码 , audio 元 素 的 运行 效果 如 图 6-2 所 示 。 
可 见 ，controls 属性 供 添加 播放 、 和 暂停 和 音量 控 > € & E 1220. hoc/audio.htn 只 | 三 
fF. audio 元 素 允 许 使 用 多 个 source 763&. source 元 素 to 
可 以 链接 不 同 的 音频 文件 ， 浏 览 器 将 使 用 第 一 个 支持 
的 音频 文件 。 需 要 注意 的 是 ， 最 好 在 <audio> 与 图 62 audio 元 素 的 运行 效果 


</audio> 之 间 插 入 浏览 器 不 支持 audio 元 素 的 提示 文本 。 

2. audio 元 素 的 常用 方法 

audio 元 素 提供 了 一 些 常 用 方法 ， 主 要 用 来 控制 音频 的 加 载 、 播 放 、 和 暂停 、 播 放 时 间 等 ， 
这 些 方法 如 表 6-3 所 示 。 


表 6-3 audio 元 素 的 常用 方法 





方法 描述 
addTextTrack 加 新 的 文本 轨道 
canPlayType 检查 浏览 器 是 否 能 够 播放 指定 的 音频 类 型 
fastSeek 在 音频 播放 器 中 指定 播放 时 间 
getStartDate 返回 新 的 Date 对 象 ， 表 示 当 前 时 间 线 偏 移 量 
load 重新 加 载 音 频 元 素 
play 开始 播放 音频 
pause 暂停 当前 播放 的 音频 


3. audio 元 素 的 常用 属性 


























audio 元 素 提供 了 一 些 常用 属性 , 主要 用 来 获取 音频 的 相关 信息 , 这 些 属性 如 表 6-4 所 示 。 
表 6-4 audio 元 素 的 常用 属性 
属性 描述 
audioTracks 返回 表示 可 用 音频 轨道 的 AudioTrackList 对 象 
autoplay 设置 或 返回 是 否 在 就 绪 ( 加 载 完成 ) 后 随即 播放 音频 
buffered 返回 表示 音频 已 缓冲 部 分 的 TimeRanges 对 象 
controller 返回 表示 音频 当前 媒体 控制 器 的 MediaController 对 象 
controls 设置 或 返回 音频 是 否 应 该 显示 控件 (比如 播放 /暂停 等 ) 
crossOrigin 设置 或 返回 音频 的 CORS( 跨 域 资源 共享 ) 设 置 
currentSrc 返回 当前 音频 的 URL 
currentTime 设置 或 返回 音频 中 的 当前 播放 位 置 (以 秒 计 ) 
defaultMuted 设置 或 返回 音频 默认 是 否 静 音 
defaultPlaybackRate 设置 或 返回 音频 的 默认 播放 速度 
duration 返回 音频 的 长 度 (以 秒 计 ) 
ended 返回 音频 的 播放 是 否 已 结束 
error 返回 表示 音 : la 的 MediaError 对 象 
loop 设置 或 返回 音频 是 否 应 在 结束 时 再 次 播放 


mediaGroup 设置 或 返回 HNREABA 合 的 名 称 
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属性 描述 
muted 设置 或 返回 是 否 关 闭 声音 
networkState 返回 音频 的 当前 网 络 状态 
paused 设置 或 返回 音频 是 否 暂 停 
playbackRate 设置 或 返回 音频 播放 的 速度 
played 返回 表示 音频 已 播放 部 分 的 TimeRanges 对 象 
preload 设置 或 返回 音频 的 preload 属性 的 值 
readyState 返回 音频 当前 的 就 绪 状态 
seekable 返回 表示 音频 可 寻 址 部 分 的 TimeRanges 对 象 
seeking 返回 用 户 当 前 是 否 正在 音频 中 进行 查找 
src 设置 或 返回 音频 的 sre 属性 的 值 
textTracks 返回 表示 可 用 文本 轨道 的 TextTrackList 对 象 
volume 设置 或 返回 音频 的 音量 


6.3.2 video 元 素 


和 音频 一 样 ， 直 到 现在 也 不 存在 一 项 旨 在 网 页 上 显示 视频 的 标准 。 过 去 大 多 数 视频 是 通 
过 插件 (比如 Flash) 来 显示 的 ， 并 非 所 有 浏览 器 都 拥有 同样 的 插件 。HTMLS5 规定 了 一 种 通过 


video 元 素来 包含 视频 的 标准 方法 。 
video 元 素 的 使 用 格式 如 下 : 
video width="320" height="240" controls 
<source src-"movie.mp4" type="video/mp4"> 
<source src-"movie.ogg" type="video/ogg"> 
您 的 浏览 器 不 支持 HTMLS video 元 素 。 
</video> 
video 元素 在 浏览 器 中 的 运行 效果 如 图 6-3 所 示 。 可 见 ， 
video 元 素 的 使 用 格式 和 audio 元 素 的 使 用 格式 非常 相似 ， 
并 且 也 是 通过 source 元 素来 组 织 视频 文件 资源 video 元 素 
提供 播放 、 和 暂停 和 音量 控件 来 控制 视频 ， 同 时 提供 width 
和 height 属性 来 控制 视频 的 尺寸 。 如果 设置 了 高 度 和 宽度 ， 
那儿 所 需 的 视频 空间 会 在 页 面 加载 时 保留 。 如 果 没 有 设置 
这 些 属 性 ， 浏 览 器 不 知道 大 小 的 视频 ， 浏 览 器 就 不 会 在 加 
载 时 保留 特定 的 空间 , 页 面 会 根据 原始 视频 的 大 小 而 改变 。 





图 6-3 video 元 素 的 运行 效果 


另外 ， 在 <video> 与 <video> 标 签 之 间 插 入 的 内 容 被 提供 给 不 支持 video 元 素 的 浏览 器 显示 。 




















video 元 素 拥 有 和 audio 元 素 类 似 的 方法 、 属 性 和 事件 。video 元 素 的 方法 、 属 性 和 事件 
也 可 以 使 用 JavaScript 进行 控制 。 其 中 ，video 元 素 的 方法 用 于 


FF 播放、 暂停 以 及 加 载 等 控制 ; 





属性 用 于 读 取 或 设置 视频 的 时 长 、 音 量 等 。 可 以 通过 DOM 事件 通知 video 元 素 开 始 播放 、 





已 暂停 、 已 停止 等 。 





video 元 素 支持 的 常用 方法 有 play、pause、load、canPlayType 等 ， 含 义 与 audio 元 素 的 


相同 。 
video 元 素 的 常用 属性 如 表 6-5 所 示 。 
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表 6-5 video 元 素 的 常用 属性 
属性 值 描述 

autoplay autoplay 如 果 出 现 该 属性 ， 那 么 视频 在 就 绪 后 马上 播放 

controls 控件 如 果 出 现 该 属性 ， 那 么 向 用 户 显示 控件 ， 比 如 播放 按钮 

height 像素 设置 视频 播放 器 的 高 度 

loop Loop 如 果 出 现 该 属性 ， 那 么 在 媒体 文件 完成 播放 后 再 次 开始 播放 

— — 如 果 出 现 该 属性 ， 那 么 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 
如 果 使 用 "autoplay"， 那 么 忽略 该 属性 

sre URL 要 播放 视频 的 URL 

width 像素 设置 视频 播放 器 的 宽度 

poster 图 片 当 视 频 不 可 用 时 ， 可 以 使 用 image 元 素 向 用 户 展示 一 幅 图 片 作为 替代 
在 视频 播放 出 现 错误 时 返回 一 个 MediaEror 对 象 ， 该 对 象 的 code 

返回 对 应 的 错误 状态 ， 取 值 有 : MEDIA_ERR_ABORTED( 数 字 1). 

TE cmi MEDIA ERR NETWORK(Žt 2), MEDIA ERR DECODE(AXt^i- 
3)fll MEDIA. ERR. SRC NOT. SUPPORTED( 数 字 习 
读 取 当 前 网 络 的 状态 ， 可 取 值 为 NETWORK EMPTY( 数 字 0). 

networkState 数字 NETWORK IDLE( 数 字 D) 、NETWORK LOADING( 数 字 2 和 
NETWORK NO_SOURCE( 数 字 3) 

buffered 对 象 确认 浏览 器 是 否 已 缓存 媒体 数据 

readyState 返回 当前 播放 位 置 的 就 绪 状 态 

seeking 布尔 值 浏览 器 是 否 正在 请 求 某 一 特定 播放 位 置 的 数据 





除了 表 6-5 中 列 出 的 属性 ， 还 有 一 些 与 audio 元 素 的 属性 及 含义 相同 ， 不 再 袭 述 。 

另外 ， 和 audio 元 素 相同 ，video 元 素 也 拥有 play、pause、load、canPlayType 方法 。 男 
外 , 还 拥有 常用 事件 play. pause. progress, error. timeupdate, ended, abort, empty, emptied, 
waiting, loadedmetadata 等 。 


64 综合 实战 


本 节 将 通过 两 个 示例 演示 如 何 使 用 audio 和 video 元 素 ， 并 通过 使 用 JavaScript 脚本 控制 
多 媒体 播放 ， 以 巩固 前 面 所 学 的 理论 知识 。 


6.4.1 用 脚本 控制 音乐 播放 
audio 元 素 一 般 都 提供 默认 的 播放 控制 界面 。 但 在 实际 项 目 中 , 很 多 时 候 需要 对 播放 控制 


界面 进行 自 定义 。 这 时 可 创建 一 个 隐藏 的 audio 元 素 ， 即 不 设置 controls 





为 false， 然 后 用 自 定义 的 播放 控制 界面 来 控制 音频 的 播放 。 





【 例 6-2】 HEX audio 元 素 的 播放 控制 界面 。 
<!DOCTYPE html> 
<html> 
<head> 


<meta http-equiv-"Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
body { 
background: url(images/bg.jpg) no-repeat; 





属性 ， 或 将 其 值 设置 


</style> 
</head> 
<title>audio 元 素 实 战 </title> 
«audio id="audio1"> 
«source src="audio/2.0gg"> 
«source src="audio/2.mp3"> 


</audio> 
<button id-"playBtn" onclick="playBtnSound0"> 播 放 </button> 
«script type="text/javascript"> 
function playBtnSound() { 
var audiol = document.getElementById("audiol"); 
var playBtn = document.getElementBylId("playBtn"); 
if (audiol.paused) ( 
audiol.play(); 
playBtn.innerHTML = "ffi". 
} else { 
audiol.pause(); 
playBtn.innerHTML = "播放 "; 
} 
} 
</script> 
</html> 


运行 以 上 程序 ， 效 果 如 图 6-4 所 示 。 


D audio 元 京 实 战 *x XC 
€ QC | 127.00.1:802 
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E64 自 定义 audio 元 素 的 播放 控制 界面 





“113。 


wks HTML5+CSS3 网 页 设计 基础 教程 








在 上 面 的 示例 中 , 首先 隐藏 了 默认 的 播放 控制 界面 , 也 没有 将 其 设置 为 加 载 后 自动 播放 ， 
而 是 创建 了 一 个 具有 切换 功能 的 控制 按钮 ， 通 过 脚本 来 控制 音频 的 播放 ， 代 码 如 下 : 
<button id-"playBtn" onclick"playBtnSound0"> 播 放 </button> 
按钮 在 初始 化 时 ， 显 示 为 “播放 ”按钮 ， 用 户 单 击 它 即 可 播放 音频 ， 这 时 “播放 ”按钮 将 
变 成 “暂停 ”按钮 ， 当 单 击 “ 和 暂停 ”按钮 时 ， 音 频 停止 播放 ,“ 和 暂停 ”按钮 变 成 “播放 ”按钮 。 
function playBtnSound() { 
var audiol = document.getElementBylId("audiol"); 
var playBtn = document.getElementById("playBtn"); 


if (audiol.paused) ( 
audiol.play(); 
playBtn.innerHTML = "暂停 "; 
} else { 
audiol.pause(); 
playBtn.innerHTML = "播放 "; 
b 


} 
6.4.2 用 脚本 控制 视频 播放 


本 例 将 演示 如 何 通 过 脚本 来 控制 视频 的 播放 。 当 页 面 加 载 时 ， 默 认 不 播放 视频 文件 。 用 
户 可 以 通过 单 击 界面 上 显示 的 “播放 /暂停 ”按钮 控制 视频 文件 的 播放 和 和 暂停 ， 还 可 以 通过 单 
击 “ 放 大 ”“ 缩 小 ”““ 普 通 ”按钮 控制 视频 显示 界面 的 大 小 。 

【 例 6-3】 通过 脚本 控制 视频 的 播放 和 暂停， 并 控制 视频 显示 界面 的 大 小 。 

<body> 
«div style-"text-align:center"- 
<button onclick="playPause0"> 播 放 /暂停 <button> 
<button onclick="makeBig0"> 放 大 </button> 
<button onclick="makeSmall0"> 缩 小 <button> 
<button onclick="makeNormal0"> 普 通 </button> 
<br 
video id-"videol" width="420"> 
<source src-"video/mov bbb.mp4" type="video/mp4"> 
<source src-"video/mov bbb.ogg" type-"video/ogg" 您 的 浏览 器 不 支持 HIMLS 
Video 标签 。 
«video 
</div> 
<script> 
var myVideo = document.getElementByld("videol"); 
function playPause() { 
if (myVideo.paused) 
myVideo.play(): 
else 
myVideo.pause(); 
} 


function makeBig() { 
myVideo.width = 560; 
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function makeSmall() ( 
myVideo width — 320; 
} 





图 6-5 通过 按钮 控制 视频 文件 的 播放 





当 单 击 “ 播 放 /暂停 ”按钮 时 ， 将 会 调用 playPause 方法 。 脚 本 判断 视频 当前 状态 是 否 为 
和 暂停 状态 ， 如 果 是 ， 就 切换 到 视频 播放 状态 ， 反 之 则 和 暂停 视频 的 播放 : 


if (myVideo.paused) 
myVideo.play(): 
else 
myVideo.pause(): 








当 单 击 “ 放 大 ”“ 缩 小 ”或 “普通 ”按钮 时 ， 将 通过 video 763811] width 属性 来 控制 视频 


播放 界面 的 大 小 。 


6.5 为 音频 或 视频 添加 字幕 


IE10 率先 对 HTMLS video 字幕 给 予 内 置 的 支持 ， 而 且 还 支持 多 语言 ， 可 任意 切换 。 


6.5.1 track 元素 的 基础 知识 








在 HTMLS 中 ， 可 以 使 用 track 元 素 在 使 用 











的 音频 中 添加 字幕 、 标 题 或 章节 等 文字 信息 。 





video 元 素 播放 的 视频 或 使 用 audio 元 素 播 放 
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track 元 素 允 许 开发 者 为 了 使 用 字幕 、 章节 标题 、 说 明文 字 或 元 数据 等 附加 信息 而 为 video 
或 audio 元 素 指定 媒体 轨道 。 换 名 话说 ，track 元 素 人 允许 开发 者 沿 着 audio 元 素 所 使 用 音频 文 
件 中 的 时 间 轴 或 video 元 素 所 使 用 视频 文件 中 的 时 间 轴 ， 指 定时 间 同 步 的 文字 资源 。 在 track 
元 素 中 , 使 用 内 部 包含 一 系列 时 间 标记 的 文本 文件 ,这 些 时 间 标 记 可 以 包含 诸如 JSON 或 CSV 
之 类 格式 的 数据 。 这 些 时 间 标 记 非 常 有 用 ， 可 以 通过 它们 实现 深层 链接 与 媒体 导航 ， 或 根据 
媒体 的 播放 时 间 执 行 界面 上 的 一 些 自动 变化 或 实现 脚本 代码 中 的 自动 处 理 。 

track 元 素 是 一 个 空 元 素 ， 其 开始 标签 与 结束 标签 之 间 并 不 包含 任何 内 容 ， 必 须 被 书写 在 
video 或 audio 元 素 的 开始 标签 和 结束 标签 之 间 。 也 就 是 说 ，track 元 素 必 须 是 video BX, audio 元 
素 的 一 个 子 元 素 。 如 果 使 用 source 元素， 那么 track 元 素 必须 被 书写 在 source 元 素 之 后 。 


6.5.2 track 元素 的 各 种 属性 


在 HTMLS 中 ， 人 允许 对 track 元 素 使 用 任何 全 局 属性 。track 元 素 本 身 拥有 default, src. 
srclang 和 kind 属性 。 

1. default 属性 

default 属性 用 于 通知 浏览 器 在 用 户 没有 选择 使 用 其 他 字幕 文件 时 可 以 使 用 这 个 track 文 
件 。default 属性 的 取 值 为 布尔 值 ， 使 用 方法 如 下 : 

<video> 
«source sre="video/mov_bbb.mp4"></source> 
«track src-"captions.vtt" default /> 
<p> 您 的 浏览 器 不 支持 video 元 素 </p> 
«video» 

2. src 属性 

src 属性 为 必需 属性 ， 用 于 指定 字幕 文件 的 存放 路 径 。 存 放 路 径 可 以 是 绝对 URL 路 径 ， 
也 可 以 是 相对 URL 路 径 。 绝 对 URL 路 径 中 包含 用 于 在 服务 器 上 寻找 字幕 文件 所 需要 使 用 的 
完整 路 径 信息 ， 如 http://www.laimeiyan.com/subtitles.srt。 相 对 URL 路 径 是 相对 于 服务 器 根 目 
录 而 言 的 路 径 ， 通 常 相对 URL 路 径 中 不 需要 书写 域名 和 端口 号 ， 例 如 /subtitles.srt。 

3. srclang 属性 

srclang 属性 用 来 指定 字幕 文件 的 语言 ， 属 性 值 是 一 种 有 效 的 BCP47 语言 。 

在 srclang 属性 的 属性 值 中 , 每 一 种 语言 可 以 由 一 个 或 两 个 由 数字 0~9、 字 母 a~z 和 字母 
A~Z 组 成 的 部 分 构成 。 当 由 两 部 分 组 成 时 , 这 两 部 分 之 间 使 用 连 字符 “-” 进 行 分 隔 。 例如 , fr-CA 
由 代表 法 语 的 在 及 代表 加 拿 大 地 区 的 CA 组 成 ， 也 就 是 说 ，ft-CA 代表 加 拿 大 地 区 所 用 法 语 。 

在 指定 srclang 属性 的 值 时 ,不 区 分 大 小 写 。 通常 使 用 小 写字 母 书写 代表 语言 的 部 分 , 使 
用 大 写字 母 书写 代表 地 区 的 部 分 。 

在 track 元 素 中 使 用 srclang 属性 的 语法 格式 如 下 : 

<video> 
<source sre="video.ogv"></source> 
«track src-"captions.vtt" srelang="zh-Hans" /> 
<p> 您 的 浏览 器 不 支持 video 元 素 </p> 
«video 
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4. kind 属性 
kind 属性 用 于 指定 字幕 文件 的 种 类 ， 即 用 于 存放 字幕 、 章 节 标题 、 说 明文 字 或 元 数据 的 
文件 。kind 属性 的 取 值 有 : subtitles, captions. descriptions, chapters 和 metadata。 这 些 属性 
值 的 含义 如 下 : 
e subtitles: 该 属性 值 表示 字幕 是 对 视频 或 音频 文件 中 的 声音 进行 翻译 或 解释 的 结果 ， 
即 用 于 用 户 听 不 懂 的 声音 , 例如 外 语 电影 中 的 对 白 。 当 video 元 素 中 的 电影 被 播放 时 ， 
在 video 元 素 的 底部 将 显示 针对 这 些 对 白 进行 的 同步 翻译 字幕 。 
e captions: 该 属性 值 表示 字幕 为 对 白 、 声 音 特效 、 相 关 音 乐 提 示 等 , 以 及 video 或 audio 
元 素 中 的 其 他 音频 信息 。 该 属性 值 专用 于 用 户 听 不 见 这 些 声音 的 场合 ， 例 如 在 用 户 
有 听力 障碍 或 者 音频 播放 设备 处 于 静音 模式 的 场合 。captions 属性 通常 用 在 video 元 
素 中 。 
e descriptions: 该 属性 值 表 示 字 幕 是 对 视频 中 可 视 内 容 提 供 的 声音 描述 。 也 就 是 说 ， 该 
属性 值 通常 用 于 用 户 看 不 见 可 视 内 容 的 场合 ， 例 如 有 视觉 障碍 或 当 用 户 在 没有 屏幕 
的 设备 上 播放 视频 文件 时 。 该 属性 通常 将 一 段 独立 的 音频 数据 和 video 元 素 中 的 视频 
数据 合成 在 一 起 。 
e chapters: 该 属性 值 表示 字幕 为 章节 标题 ， 所 以 通常 被 用 在 对 视频 文件 或 音频 文件 进 
行 导航 时 。 在 浏览 器 中 ， 该 属性 值 通常 起 到 导航 菜单 的 作用 。 
e metadata: 该 属性 值 表示 字幕 为 针对 视频 或 音频 提供 的 元 数据 内 容 ， 即 该 属性 值 通常 
用 于 被 JavaScript 等 脚本 语言 调用 。 该 属性 值 指定 的 内 容 通常 不 被 显示 在 浏览 器 中 。 
当 不 对 track 元 素 使 用 kind 属性 的 时 候 ，kind 属性 的 默认 值 为 subtitles。 
通常 将 字幕 文件 命名 为 与 video 或 audio 元 素 所 使 用 视频 文件 或 音频 文件 相同 的 文件 名 ， 
这 是 一 种 好 习惯 ， 因 为 许多 浏览 器 中 的 音频 播放 器 或 视频 播放 器 将 自动 寻找 和 音频 文件 或 视 
频 文件 相同 的 字幕 文件 并 自动 加 载 。 例 如 ， 有 一 个 move.avi 视频 文件 ， 需 要 为 该 视频 文件 提 
供 中 文字 幕 , 可 以 将 字幕 文件 命名 为 movie srt 或 movie zh-Hans.srt(zh-Hans 表示 在 track 文件 
中 显示 简体 中 文 )。 
需要 注意 的 是 ， 在 同一 个 video 或 audio 元 素 中 ， 不 允许 有 两 个 相同 kind 属性 值 或 不 使 
J kind 属性 值 的 track 元 素 ， 也 不 允许 有 两 个 相同 srelang 属性 值 或 不 使 用 srclang 属性 值 的 
track 元 素 ， 还 不 允许 有 两 个 相同 label 属性 值 或 不 使 用 label 属性 值 的 track 元 素 。 


TE track 元 素 中 使 用 kind 属性 并 且 将 该 属性 的 值 指定 为 subtitles， 代 码 如 下 : 
<video> 
<source src="video.ogv"> 
«track kind="subtitles" src-"subtitles.vtt" /> 
<p> 您 的 浏览 器 不 支持 video 元 素 <p> 
</source> 
</video> 


6.5.3 WebVTT 文件 






























































1. WebVTT 概述 
WebVTT 是 HTMLS 视频 外 挂 字幕 的 英文 简称 (Web Video Text Track， 网 络 视频 文本 轨 
道 )， 是 以 .vtt 结尾 的 纯 文 本 文件 ， 允 许 开发 人 员 标记 外 部 文字 轨道 。 该 文件 包含 以 下 几 种 视 
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e 字幕 (subtitles): 关于 对 话 的 转译 或 翻译 。 
标题 (captions): 类 似 于 标题 ， 但 是 还 包括 音响 效果 和 其 他 音频 信息 。 
说 明 (description): 预期 为 一 个 单独 的 文本 文件 ， 通 过 屏幕 阅读 器 描述 视频 。 
章节 (chapters); 旨 在 帮助 用 户 浏览 整个 视频 。 
元 数据 (metadata): 默认 不 打算 展示 给 观众 的 、 和 视频 有 关 的 信息 及 内 容 ， 但 是 可 以 
使 用 JavaScript 来 访问 。 

在 HTMLS 中 ， 可 以 通过 track 元 素 对 WebVTT 文件 进行 引用 ， 这 意味 着 可 以 为 音频 或 
视频 等 媒体 资源 提供 诸如 字幕 、 标 题 或 描述 等 信息 ， 并 将 这 些 信息 同步 显示 在 媒体 资源 中 。 

2. WebVTT 文件 的 内 容 

WebVTT 文件 是 一 种 文本 文件 ， 使 用 UTF-8 编码 ， 并 使 用 HTMLS 标准 中 指定 的 格式 。 
下 面 是 一 个 标准 的 WebVTT 文件 示例 : 

WebVTT 




















1 
00:00:13.000 --> 00:00:16.100 
I heard about this arduino project, and I saw it online 


2 
00:00:16.100 --> 00:00:20.100 
- and I said "Wow! a lot of people are starting to talk about this. 


Ishould check it out! 
从 以 上 示例 可 知 ，WebVTT 文件 的 内 容 的 由 一 些 WebVTT 标记 cue 组 成 ， 标 记 与 标记 之 
间 用 行 分 隔 符 分 开 。 可 以 在 WebVTT 标记 中 书写 一 些 文字 或 一 个 媒体 文件 的 文字 内 容 例如 一 


行 歌 词 ， 以 及 这 些 内 容 呈 现 的 时 间 范 围 。 每 一 个 标记 cue 可 以 有 一 个 唯一 标识 符 id; 每 一 个 
cue 是 以 箭头 分 隔 的 开始 时 间 和 结束 时 间 (如 示例 中 的 00:00:13.000 --> 00:00:16.100), cue 对 应 
的 文本 在 时 间 的 下 一 行 (如 示例 中 的 Iheard about this arduino project, and I saw it online). cue 
的 时 间 格 式 为 hours:minutes:seconds:milliseconds， 时 、 分 、 秒 必须 为 两 位 数字 ， 不 足 位 时 以 0 
填补 ， 上 毫秒 必须 是 3 位 数字 。WebVTT 文件 的 格式 可 以 通过 一 些 校 验 器 进行 校 验 ， 如 Live 
WebVTT Validator 等 。 
需要 注意 的 是 ， 当 在 有 些 服务 器 上 使 用 WebVTT 文件 时 ， 可 能 需要 定义 内 容 类 型 ， 例 如 
在 Apache 服务 器 上 应 该 进行 如 下 定义 : 
<Files mysubtitle.vtt> 
ForceType text/vtt;charset-utf-8 
</Files> 
3. 设置 字幕 样式 
在 WebVTT 文件 中 ， 可 以 对 字幕 样式 进行 设置 ， 主 要 通过 内 联 样 式 来 实现 ， 示 例如 下 : 
WebVIT 


H 
00:00:13.000 --> 00:00:016.100 
Ich hörte von dieser <c.red.caps>arduino</c> Projekt, und ich sah es online - 
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2 

00:00:16.100 --> 00:00:20.100 

- und ich sagte "<b>Wow!</b> eine Menge Leute fangen an, darüber zu reden. 
Ich <i>check it out</i>!" 

















这 样 的 内 联 样式 也 成 为 WebVTT 标记 组 件 , 可 以 使 用 这 些 标记 组 件 在 标记 文字 中 添加 更 


多 信息 。 


件 如 下 : 
. 


这 些 标记 组 件 和 HTML 元 素 一 样 ， 可 以 用 于 对 标记 文字 添加 语义 和 样式 。 常 用 的 组 





c: 用 来 指定 CSS 样式 类 名 ， 以 c. 为 前 级 ， 例 如 <c.className> 标 记 文字 </c>。 

i 指定 斜体 文字 。 

b: 指定 粗 体 文字 。 

u: 指定 下 画 线 文字 。 

ruby: 与 HTMLS 中 的 muby 元 素 类 似 。 通 过 这 个 组 件 ， 可 以 指定 一 个 或 更 多 个 开元 素 。 
v: 指定 标记 被 讲述 时 的 讲话 者 标签 。 例 如 <v Tan> 可 以 用 来 添加 字幕 </v>。 注 意 讲话 
者 标签 不 会 被 显示 ， 它 只 是 一 个 样式 标签 。 





4. 为 字幕 设置 位 置 
在 WebVTT 文件 中 , 可 以 对 位 置 进行 设置 。 位 置 设置 可 以 写 在 时 间 的 同一 行 , 示例 如 下 : 


WebVTT 


00:00:05.000 --> 00:00:08.040 A:middle L:10% 
Idabble? Listen to me. What a jerk. 


00:00:05.000 --> 00:00:08.040 A:middle L:60% 
Yeah, I sort of dabble around, 
you know. 


5. 章节 chapters 解释 
章节 chapters 解释 的 语法 和 字幕 类 似 ， 示 例如 下 : 


chapter-1 
00:00:00.000 --> 00:00:18.000 
Introductory Titles 


chapter-2 
00:00:18.001 --> 00:01:10.000 
The Jack Plugs 


chapter-3 
00:01:10.001 --> 00:02:30.000 
Robotic Birds 


在 使 用 的 时 候 ， 需 要 设置 kind =chapter， 目 前 主流 浏览 器 对 chapters 的 支持 不 大 完善 ， 
最 好 的 办 法 是 采用 自 定义 界面 。 一 般 自 定义 界面 需要 提供 以 下 特性 : 


展示 章节 列表 
允许 用 户 选择 章节 
播放 时 高 亮 当前 选择 的 章节 


可 以 通过 如 下 方式 实现 这 些 特性 : 


*120* HTMLS:CSSS3 网 页 设计 基础 教程 








«video src-"sintel.mp4"- 
«track kind-" chapter" 
label-"Chapters" 
src-"sintel chapters.vtt" srclang-"en" 
onload = "displayChapters(this)"—/track-- 
«video 


function displayChapters(trackElt) ( 
if((trackElt) && (textTrack = trackElt.track)) ( 
这 textTrack kind —— "chapters") ( 

/ 不 显示 字幕 

textTrack.mode = 'hidden': 

var chapterBlock = document.getElementByld("chapters"); 

// cues 列表 

for (var i— 0; i < textTrack.cues length: +i) { 
var cue = textTrack.cues[i]; 
var chapterName — cue.text; 
var start = cue.startTime; 


// 实现 选择 chapters 解释 的 逻辑 





} 
) 
6. WebVTT 实现 
在 HTMLS 中 可 通过 video 元 素 的 子 元 素 track 来 引用 WebVTT 文件 ， 实 现 字幕 的 显示 ， 
代码 如 下 : 
video controls> 
<source src-"video.mp4" type="video/mp4"> 
<source src-"video.webm" type="video/webm"> 
«track label-"English Captions" kind="captions" srclang-"en" sre="video_cc_en.vtt"> 
«track label="German Subtitles" kind="subtitles" srclang="de" src="video_sub_de.vtt"> 
«track label-"French Subtitles" kind="subtitles" srclang-"fr" src="video sub fr.vtt"> 
track label-"English Descriptions" kind-" descriptions" srclang-"en" src-"video audesc en.vtt" 
track label-"Chapters" | kind-"chapters" srclang-"en" src-"video chapters en.vtt" 
«video» 


66 本 章 小 结 


HTMLS 新 增 的 audio 和 video 元 素 ， 让 HTMLS 的 媒体 应 用 多 了 新 的 选择 ， 开 发 人 员 不 
必 使 用 插件 就 能 播放 音频 和 视频 , 这 给 插件 或 工具 带 来 了 巨大 冲击 ,目前 Web 应 用 开发 中 音 
频 和 视频 的 播放 已 基本 脱离 了 插件 。 对 于 这 两 个 元 素 ，HIML5 规范 提供 了 通用 、 完 整 、 可 
脚本 化 控制 的 API 供 开发 人 员 使 用 。 

本 章 讨 论 了 如 何在 HTMLS 中 实现 音频 和 视频 的 播放 及 控制 ， 首 先 介绍 了 编 解码 器 的 基 
础 知识 、 音 频 编 解 码 器 、 视 频 编 解码 器 ;然后 介绍 了 如 何 使 用 HTMLS 的 两 个 重要 元 素 一 一 
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audio 和 video 来 创建 支持 音频 和 视频 播放 及 控制 功能 的 Web 应 用 和 APP; 接着 ， 演 示 了 如 
何 通过 API 编程 的 方式 来 控制 页 面 中 的 音频 和 视频 ; 最 后 探讨 了 HIMLS audio 和 video 元 素 
在 实际 项 目 中 的 应 用 ， 以 及 如 何 为 音频 和 视频 添加 字幕 。 


67 思考 和 练习 


1. 简 述 编 解码 器 的 作用 。 常 见 的 音频 和 视频 解码 器 有 哪些 ? 

2. audio 元 素 的 作用 是 什么 ? 如 何在 页 面 中 使 用 audio 元 素 。 

3. video 元 素 的 作用 是 什么 ? 如 何在 页 面 中 使 用 audio 元 素 

4. 简 述 track 元 素 在 音频 和 视频 播放 中 的 作用 。 

5. 如 何 通过 video 的 子 元 素 track 来 引用 WebVTT 文件 , 实现 字幕 的 显示 ? 请 提供 核心 代码 。 
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过 去 ， 传 统 的 客户 端 存储 技术 大 多 使 用 Cookie 存储 数据 。 但 Cookie 并 不 安全 ， 用 户 常 
将 浏览 器 的 Cookie 功能 禁用 ， 导 致 客户 端 不 能 直接 读 取 文 件 ， 从 而 使 客户 端 几乎 没有 任何 有 
效 的 存储 技术 可 言 。 因 此 ， 需 要 什么 数据 都 要 请 求 服务 器 ， 先 获取 到 客户 端 ， 然 后 进行 泻 染 。 

大 数据 和 智能 科学 的 爆发 ，Web 技术 的 发 展 ， 使 得 人 们 考虑 在 安全 性 的 基础 上 ， 为 客户 
端 提供 多 种 有 效 的 存储 技术 。HTMLS 为 客户 端 存 储 数据 提出 了 理想 的 解决 方案 : 如 果 想 存 
储 复杂 的 数据 ， 可 以 使 用 Web Database, 该 方法 可 以 像 客 户 端 程序 一 样 使 用 SQL 语句 对 数据 
库 进行 操作 ;如 果 只 是 存储 简单 的 键 / 值 对 ， 可 以 使 用 Web 存储 。 本 章 将 介绍 Web 存储 和 
Web Database 的 使 用 。 

本 章 学 习 目 标 : 

e 理解 Cookie 存储 机 制 的 优 缺 点 ， 从 而 了 解 为 什么 要 使 用 Web 存储 

e 掌握 使 用 Web 存储 的 方法 ， 如 检查 浏览 器 的 兼容 性 、 设 置 和 获取 数据 、 防 止 数 据 汇 

露 、 监 测 Web 存储 事件 等 
e 掌握 本 地 数据 库 的 使 用 ， 包 括 本 地 数据 库 的 基本 概念 、 执 行 查 询 等 。 


7.1 Web 存储 


Web 存储 允许 开发 人 员 以 键 值 对 的 形式 将 数据 保存 在 客户 端 浏 览 器 中 。 
7.1.1 Cookie 存储 机 制 的 优 缺 点 


Cookie 是 HIML5 之 前 在 客户 端 浏 览 器 中 信息 存储 的 主要 方式 之 一 ， 它 使 用 文本 来 存储 
信息 ， 当 有 应 用 程序 使 用 Cookie 时 ， 服 务 器 端 就 会 发 送 Cookie 到 客户 端 ， 客 户 端 浏览 器 将 
其 保存 下 来 。 下 次 发 生 页 面 请 求 时 ， 客 户 端 浏 览 器 就 会 把 Cookie 发 送 到 服务 器 。Cookie 最 
典型 的 应 用 是 保存 用 户 信息 ， 如 用 户 设置 、 密 码 等 。 

使 用 Cookie 存储 信息 的 优点 有 : 简单 易 用 ,浏览 器 负责 发 送 数据 ， 且 自动 管理 不 同 站 点 
的 Cookie。 

使 用 Cookie 保存 信息 的 缺点 有 : 安全 性 差 ， 存 储 容量 只 有 4KB， 且 存储 的 键 值 对 数量 
AR: 用 户 可 以 将 浏览 器 设置 为 禁用 Cookie: 另外， 由 于 Cookie 由 请 求 来 传递 ， 因 此 传递 
大 量 数据 时 ， 效 率 显 得 极 低 。 


7.4.8. 为 什么 要 用 Web 存储 


Web 存储 机 制 比 传统 的 Cookie 更 加 强大 ， 弥 补 了 Cookie 的 许多 缺点 ， 主 要 在 两 方面 做 
了 加 强 : 第 一 ，Web 存储 提供 了 简单 易 用 的 API 接口， 只 需 设 置 键 值 即 可 ; 第 二 ， 在 存储 容 
量 方面 可 以 根据 用 户 分 配 的 磁盘 配额 进行 存储 ， 能 够 在 每 个 用 户 域 存 储 SMB—10MB 的 内 容 ， 
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仅 可 以 存储 会 话 ， 还 可 以 存储 许多 信息 ， 如 设置 偏好 、 本 地 化 的 数据 和 离线 数据 等 。 
储 还 提供 了 使 用 JavaScript 编程 的 接口 , 开发 者 可 以 使 用 JavaScript 客户 端 脚本 实现 许 
只 能 在 服务 器 端 才 能 完成 的 工作 。 

















HTMLS 的 Web 存储 提供 了 localStorage 和 sessionStorage 两 种 在 客户 端 存 储 数据 的 方式 。 


localStorage: 这 是 一 种 没有 时 间 限 制 的 数据 存储 方式 , 可 以 把 数据 保存 在 客户 端 磁盘 
或 其 他 存储 器 上 ， 存 储 时 间 可 以 是 一 天 、 两 天 、 几 周 或 几 年 。 浏 览 器 关闭 时 数据 并 
不 会 丢失 ， 当 再 次 打开 浏览 器 时 ， 依 然 可 以 访问 这 些 数据 。localstorage 用 于 持久 化 
的 本 地 存储 ， 除 非 主动 删除 数据 ， 否 则 数据 永 不 过 期 。 

sessionStorage: 这 是 针对 会 话 的 数据 存储 方式 ， 也 就 是 将 数据 保存 在 会 话 对 象 中 。 
Web 中 的 会 话 指 的 是 用 户 在 浏览 某 个 网 站 时 ， 从 进入 网 站 到 关闭 浏览 器 所 经 过 的 时 
间 ， 通 常 称 为 用 户 和 浏览 器 进行 交互 的 “会 话 时 间 ”。session 对 象 用 来 保存 这 个 时 间 
段 内 所 有 要 保存 的 数据 ， 在 用 户 关闭 浏览 器 后 ， 这 些 数据 就 会 被 删除 。 














sessionStorage 用 于 本 地 存储 一 个 会 话 中 的 数据 , 只 有 处 在 同一 个 会 话 中 的 页 面 才能 访问 


这 些 数据 ， 并 且 当 会 话 结束 后 数据 也 随 之 销毁 。 因 此 ， 这 种 存储 方式 不 是 一 种 持久 化 的 存储 
方式 ， 仅 仅 是 会 话 级 别 的 存储 。 

综 上 可 知 ，localStorage 可 以 永久 保存 数据 ， 而 sessionStorage 只 能 暂时 保存 数据 。 
7.1.3 Web 存储 的 优 缺 点 

Web 存储 的 优点 有 以 下 几 点 : 

e 存储 空间 更 大 :IE8 下 每 个 独立 的 存储 空间 为 10MB， 其 他 浏览 器 实现 略 有 不 同 ， 但 


都 比 Cookie 大 很 多 。 

存储 内 容 不 会 发 送 到 服务 器 : 设置 了 Cookie 后 ，Cookie 的 内 容 会 随 着 请 求 一 并 发 送 
到 服务 器 ,这 对 于 本 地 存储 的 数据 是 一 种 带宽 浪费 ; 而 We 存储 中 的 数据 仅仅 存放 在 
本 地 ， 不 会 与 服务 器 发 生 任何 交互 。 

更 多 丰富 易 用 的 接口 : Web 存储 提供 了 一 套 更 为 丰富 的 接口 ， 使 得 数据 操作 更 为 
简便 。 

独立 的 存储 空间 : 每 个 域 (包括 子 域 有 独立 的 存储 空间 , 各 个 存储 空间 是 完全 独立 的 ， 
因此 不 会 造成 数据 混乱 。 


Web 存储 的 不 足 之 处 在 于 : 浏览 器 为 每 个 域 分 配 独立 的 存储 空间 ， 不 同 域 的 存储 空间 不 
能 交叉 访问 ， 但 是 在 域 B PRAS A 的 脚本 依然 可 以 访问 域 B 中 的 数据 ;存储 在 本 地 的 数 
据 未 加 密 ， 容 易 造 成 隐私 泄露 。 


72 ”使 用 Web 存储 


在 使 用 Web 存储 时 ， 需 要 先 检查 浏览 器 的 支持 性 。 只 有 在 浏览 器 支持 Web 存储 时 ， 才 
能 进行 设置 和 获取 数据 的 操作 。 


T21 


检查 浏览 器 的 支持 性 


并 非 所 有 的 浏览 器 都 支持 Web 存储 , 而 且 每 种 浏览 器 对 Web 存储 的 支持 程度 也 不 一 样 ， 
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因此 在 使 用 Web 存储 前 ， 有 必要 检查 浏览 器 的 支持 性 以 及 对 每 种 存储 方式 的 支持 程度 。 下 面 
以 示例 来 介绍 如 何 检测 浏览 器 对 Web 存储 的 支持 性 。 
【 例 7-1】 检查 浏览 器 对 Web 存储 的 支持 性 。 
<body> 
<script> 
if (typeof(Storage) — "undefined") { 
document write(" 您 的 浏览 器 不 支持 Web 存储 "); 
jelse( 
document. write(" 您 的 浏览 器 可 以 使 用 Web 存储 "); 











T 
</body> 
运行 以 上 程序 ， 若 浏览 器 支持 Web 存储 ， 将 输出 “您 的 浏览 器 可 以 使 用 Web FiK”: 18 
则 输出 “您 的 浏览 器 不 支持 Web 存储 ”。 


7.2.2 设置 和 获取 数据 
使 用 sessionStorage 设置 和 获取 网 页 中 的 简单 数据 主要 有 两 种 方式 : 一 种 是 SeVGet 语法 ， 


-种 是 点 语法 。 
e SetGet 语法 
设置 数据 的 语法 格式 如 下 : 
window.sessionStorage.setItem('myFirstKey" 'myFirstValue"); 
获取 数据 的 语法 格式 如 下 : 
alert(window.sessionStorage.getItem("myFirstKey"); 
e 点 语法 
设置 键 值 对 的 语法 格式 如 下 : 
window.sessionStorage.myFirstKey='myFirstValue'; 
获取 数据 的 语法 格式 如 下 : 
alert(window.sessionStorage.myFirstKey); 
需要 注意 的 是 ， 只 要 网 页 是 同 源 的 ， 基 于 相同 的 键 ， 就 能 够 在 其 他 网 页 中 获得 设置 在 
sessionStorage 中 的 数据 。 但 有 时 候 ， 一 个 应 用 程序 会 用 到 多 个 标签 页 或 窗口 中 的 数据 ， 或 用 
到 多 个 视图 共享 的 数据 ， 这 种 情况 下 ， 比 较 恰 当 的 做 法 是 使 用 localStorage. localStorage 和 
sessionStorage 的 用 法 相同 ， 唯 一 区 别 是 访问 它们 的 名 称 不 同 ， 分 别 通过 localStorage 和 
sessionStorage 对 象 来 访问 。 二 者 在 行为 上 的 差异 主要 是 数据 的 保存 时 长 和 共享 方式 。 
localStorage 数据 的 生命 周期 要 比 浏览 器 和 窗口 的 生命 周期 长 ， 同 时 被 同 源 的 多 个 窗口 或 标签 
页 共享 ， 而 sessionStorage 数据 只 在 构建 它们 的 窗口 或 标签 页 中 可 见 。 


7.2.3 Web 存储 的 其 他 操作 
除了 设置 和 获取 数据 外 ， 还 可 以 对 Web 存储 的 对 象 执行 以 下 操作 : 
e 获取 对 象 的 长 度 : 使 用 length 属性 获取 目前 Storage 对 象 中 存储 的 键 值 对 的 数量 。 需 要 
注意 的 是 ，Storage 对 象 是 同 源 的 ， 因 此 Storage 对 象 的 长 度 只 反映 同 源 情况 下 的 长 度 。 
e 获取 指定 位 置 的 键 : 通 过 key(index) 方 法 获取 指定 位 置 的 键 。 
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e 删除 数据 项 : 通过 removeItem(key) 删 除数 据 项 。 如 果 数 据 存储 在 键 参数 下 ， 调 用 此 
函数 会 将 相应 的 数据 项 删除 。 如 果 键 参数 没有 对 应 的 数据 ， 那 么 不 会 执行 任何 操作 。 
e 清除 所 有 数据 : 通过 clear 函数 删除 存储 列表 中 的 所 有 数据 。 


7.2.4 监测 Web 存储 事件 


在 HIMLS 中 ， 可 以 通过 window 对 和 象 的 storage 事件 进行 监听 并 指定 事件 处 理 函 数 ， 
从 而 定义 当 在 其 他 页 面 中 修改 sessionStorage 或 localStorage 中 的 值 时 所 要 执行 的 处 理 , 代 
码 如 下 : 
window.addEventListener('storage' function() ( 
// 当 sessionStorage PX, localStorage 中 的 值 发 生变 动 时 所 要 执行 的 处 理 
},false); 
在 事件 处 理 函 数 中 ， 触 发 事件 的 事件 对 象 (event 参数 值 ) 具 有 如 下 属性 : 
eventkey: 属性 值 为 在 sessionStorage 或 localStorage 中 被 修改 的 数据 键 值 。 
event.oldValue: 属性 值 为 在 sessionStorage 或 localStorage 中 被 修改 前 的 值 。 
eventnewValue: 属性 值 为 在 sessionStorage 或 localStorage 中 被 修改 后 的 值 。 
eventurl: 属性 值 为 sessionStorage 或 localStorage 中 值 的 页 面 URL 地 址 。 
eventstorageArea: 属性 值 为 变动 的 sessionStorage 或 localStorage 对 象 。 
【 例 7-2】 Web 存储 事件 监测 示例 。 
storage2.html: 该 页 面 提供 了 一 个 输入 框 和 一 个 按钮 ， 当 在 输入 框 中 输入 一 个 值 并 单 击 
“设置 ”按钮 后 ， 调 用 setLocalStorage 方法 将 该 值 存储 到 localStorage 的 test 对 象 中 。 
EE 
«meta charset="UTF-8"> 
<title> 修 改 webStorage 中 的 数据 </title> 


<script> 
function setLocalStorage() { 
localStorage.test = document.getElementBylId("text1").value; 




















} 
</script> 
</head> 


请 输入 一 些 值 : <input type="text" id-"textl" /> 
<button onclick="setLocalStorage0"> 设 置 </button> 
</body> 
storage html: 该 页 面 只 有 一 个 output 元 素 。 当 页 面 加 载 时 , 通过 windowaddEventListener 
添加 事件 监听 ， 监 听 键 为 test 的 localStorage 对 象 的 值 的 变化 情况 ， 然 后 输出 。 
<head lang="en"> 

<meta charset="UTF-8"> 

<title> 利 用 storage 事件 实时 监视 webStorage 中 的 数据 </title> 

«script 

window.addEventListener('storage', function(event) ( 
if (event key — "test") { 

var output = document.getElementById("output"); 
output.innerHTML = " 原 有 值 : "--event.oldValue; 
output.innerHTML+ 二 "<br 记 新 值 : " + event.newValue; 
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outputinnerHTML+="<br> 变 动 页 面 地 址 : "+utfg_decode(unEscape 


(event.url)): 
console.log(event.storageArea); 
// 此 行 代码 只 在 Chrome 浏览 器 中 有 效 
console log(event.storageArea = localStorage); // 输 出 true 
} 
}, false); 
function utf8 decode(utfText) { 
var string = ""; 
vari= 0; 
varc=cl=c2=0; 
while (i < utfText.length) { 
c — utfText.charCodeAt(1): 
if (c < 128) ( 
string += String.formCharCode(c); 
itt 
} else if (c > 191) && (c < 224) { 
c2 — utfText.charCodeAt(i + 1); 
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)): 
i+=2; 
} else { 
c2 =utfText.charCodeAt(i + 1); 
c3 = utfText.charCodeAt(i + 2); 
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
it-3; 
h 
) 
Tetum string; 
} 
</script> 
</head> 
<body> 
<output id="output"></output> 
</body> 


运行 以 上 两 个 页 面 ， 首 先 在 storage2.html 页 面 上 输入 数值 10， 然 后 单 击 “ 设 置 ”按钮 ， 
然后 重新 输入 数值 20， 再 次 单 击 “ 设 置 ”按钮 。 然 后 切换 到 storage html 页 面 ， 可 以 看 到 检 
测 到 的 值 的 变化 情况 ， 如 图 7-1 所 示 。 





D 修改 webStorage 呆 的 数 ”X D Estoree x WIN 
C Q|O1270018020/h0; 女 | 9. : C Q |0O12700190 *| i 


请 输入 一 些 值 : 20 2m 原 有 值 10 
新 值 : 20 





图 7-1 检测 到 的 值 的 变化 情况 
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7.2.5 制作 简单 的 网 页 皮肤 


在 访问 网 站 的 时 候 ， 可 以 经 常 看 到 ， 一 些 网 站 允许 用 户 选 择 自己 喜欢 的 主题 风格 。 当 再 
次 登录 的 时 候 ， 网 站 将 为 用 户 显示 上 次 设置 的 主题 风格 ， 这 样 的 主题 风格 被 称 为 “皮肤 ” 在 
网 页 设计 中 ， 一 般 用 JavaScript 动态 设计 网 页 皮肤 。 
对 于 皮肤 配置 数据 ， 就 可 以 使 用 localStorage 存储 。 这 样 ， 当 用 户 再 次 登录 访问 的 时 候 ， 
程序 将 自动 调用 localStorage 数据 来 设置 恢复 页 面 样式 。 
【 例 7-3】 制作 简单 的 网 页 皮肤 。 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset=utf-8"> 
<title> 制 作 简单 的 网 页 皮肤 </title> 
</head> 
<body onload="colorload0;"> 
<script type="text/javascript"> 
/ 检测 浏览 器 是 否 支 持 localStorage。 
if (typeof localStorage —— 'undefined") { 
window.alert(" 您 的 浏览 器 不 支持 localStorage。"); 
} else { 
var storage = localStorage; 
/ 设置 div 背景 颜色 为 红色 ， 并 保存 localStorage。 
function redbg() ( 
var value = "red": 
document.getElementByld("skin").style.backgroundColor = value; 
window.localStorage.setItem("DivBackGroundColor", value); 





























} 

/ 设置 div 背景 颜色 为 绿色 ， 并 保存 localStorage。 

function greenbg() { 
var value — "green": 
document.getElementBylId("skin").style.backgroundColor = value; 
window.localStorage.setItem("DivBackGroundColor", value); 


} 

/ 设置 div 背景 颜色 为 蓝 色 ， 并 保存 localStorage. 

function bluebg() { 
var value — "blue": 
document.getElementById("skin").style.backgroundColor = "blue": 
window.localStorage.setItem("DivBackGroundColor", value); 

H 


function colorload() ( 
document .getElementBylId("skin").style.backgroundColor = window.localStorage. 
getItem("DivBackGroundColor"); 


5 

</script> 

<section id="main"> 
<button id-"r btn" onclick-"redbg()" £T f&-/button-- 
button id-"g btn" onclick-"greenbe()" 5$ (5—/button- 
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<button id-"b btn" onclick"bluebg0"> 蓝 色 </button> 
«div id="skin" style-"width:500px; height:500px;"></div> 
</body> 
运行 以 上 程序 ， 效 果 如 图 7-2 所 示 。 





图 7-2 制作 简单 的 网 页 皮肤 


7.26 ”网 站 人 和气 值 和 在 线 人 数 统计 


我 们 在 浏览 网 站 的 时 候 ， 经 常 可 以 看 到 网 站 上 显示 着 人 和 气 值 或 当前 在 线 人 数 ， 实 现 原理 
大 多 是 基于 会 话 的 统计 。sessionStorage 可 以 作为 会 话 计数 器 ，localStorage 则 可 以 作为 Web 
| 


应 用 访问 计数 器 。 声明 一 个 localStorage 计数 变量 , 当 刷 新 页 面 时 , 会 看 到 计数 器 数值 在 增加 。 
关闭 浏览 器 窗口， 然后 重新 打开 , 计数 器 数值 还 会 在 原来 的 基础 上 继续 增加 。 而 sessionStorage 
计数 变量 E 当 前 会 话 期 间 显 示 页 面 的 访问 量 ， 刷 新 页 面 会 看 到 计数 器 在 增长 ， 关 闭 浏览 
器 ， 然 后 再 重新 打开 ， 计 数 器 数值 将 被 清除 。 

【 例 7-4】 网 站 人 气 值 和 在 线 人 数 统计 。 












<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset=utf-8"> 
<title> 人 气 和 在 线 人 数 </title> 
</head> 
<body> 
<script type="text/javascript"> 
if (localStorage.pagecount) { 
localStorage.pagecount = Number(localStorage.pagecount) + 1; 
} else ( 
localStorage.pagecount = 1; 
} 
document write(" 人 气 值 : <br />" + localStorage.pagecount); 
if (sessionStorage.pagecount) { 
sessionStorage.pagecount — Number(sessionStorage.pagecount) + 1: 
J else t 
sessionStorage.pagecount = 1; 
H 
document write("<br 户 在 线 人 数 : <br/>"  sessionStorage.pagecount); 
</script> 
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运行 以 上 程序 ， 效 果 如 图 7-3 所 示 。 





图 7-3 网 站 人 气 值 和 在 线 人 数 


73 ”本 地 数据 库 


7.3.1 本 地 数据 库 的 基本 概念 


在 HIML4 中 ， 数 据 库 只 能 放 在 服务 器 端 ， 通 过 服务 器 访问 数据 库 。 但 在 HTMLS 中 ， 
可 以 像 访 问 本 地 文件 那样 轻松 对 内 置 数 据 库 进行 直接 访问 。HTML5 中 内 置 了 两 种 本 地 数据 
WE: 一 种 是 本 节 介绍 的 SQLLite 一 一 可 以 通过 SQL 语言 来 访问 的 文件 型 SQL 数据 库 ， 另 一 
种 是 被 称 为 ndexedDB 的 NoSQL 类 型 的 数据 库 。 本 书 限于 篇 幅 ， 仅 对 第 一 种 数据 库 进 行 介 
绍 。 对 NoSQL 感 兴趣 的 读者 可 以 阅读 其 他 相关 资料 。 

要 在 JavaScript 脚本 中 使 用 SQLLite 数据 库 ， 有 两 个 必要 步 又， 

(1) 创建 和 访问 数据 库 对 象 。 

Q) 使 用 事务 对 数据 库 进 行 操作 。 

创建 和 访问 数据 库 对 象 的 方法 如 下 : 

var db = openDatabase('mydb''1.0',Test Database'2 * 1024 * 1024): 

其 中 ,第 一 个 参数 为 数据 库 名 称 ， 第 二 个 参数 为 版 本 号 ， 第 三 个 参数 为 数据 库 描 述 信息 ， 
第 四 个 参数 为 数据 库 大 小 。 该 方法 返回 创建 后 的 数据 库 访问 对 象 ， 如 果 该 数据 库 不 存在 ， 就 
创建 该 数据 库 。 

在 实际 访问 数据 库 时 ， 需 要 调用 transaction 方法 ， 用 来 执行 事务 处 理 。 使 用 事务 处 理 ， 
可 以 防止 在 对 数据 库 进 行 访问 以 及 执行 有 关 操 作 时 受到 外 界 干扰 。 因 为 在 Web 上, 同时 会 有 
许多 人 在 对 页 面 进行 访问 。 如 果 在 访问 数据 库 的 过 程 中 , 正在 操作 的 数据 被 别 的 用 户 修改 掉 ， 
会 引起 许多 意 想 不 到 的 后 果 。 因 此 ， 可 以 使 用 事务 来 达到 在 操作 完成 之 前 ， 阻 止 其 他 用 户 访 
问 数据 库 的 目的 。 

transaction 方法 的 使 用 格式 如 下 : 

db.transaction(function(tx) ( 
tx executeSqI CREATE TABLE IF NOT EXISTS logs(ID unique .Log)): 




















3x 
transaction 方法 使 用 一 个 回调 函数 作为 参数 。 在 这 个 回调 函数 中 ， 执 行 访问 数据 库 的 语句 。 


7.3.2 用 executeSql 执行 查询 
接 下 来 介绍 在 transaction 方法 的 回调 函数 内 如 何 访问 数据 库 。 这 里 使 用 作为 参数 传递 给 
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回调 函数 的 transaction 对 象 的 executeSql 方法 ， 使 用 格式 如 下 : 
transaction.executeSql(sqlquery.[].dataHandler.errorHandler); 

其 中 ， 第 一 个 参数 为 需要 执行 的 SQL 语句 ， 第 二 个 参数 为 SQL 语句 中 所 有 用 到 的 参数 
的 数组 。 在 executeSql 方法 中 ， 将 SQL 语句 中 要 用 到 的 参数 先 用 问号 “? ”代替 ， 然 后 依次 
将 这 些 参 数组 成 数组 放 在 第 二 个 参数 中 ， 例 如 : 
transaction.executeSql("UPDATE people set age? where name=?; " [age.name]): 
第 三 个 参数 为 执行 SQL 语句 成 功 时 调用 的 回调 函数 ， 该 回调 函数 的 传递 方法 如 下 : 

function dataHandler(transaction.results) ( 

/执行 SQL 语句 成 功 时 的 处 理 

















ds 
第 四 个 参数 为 执行 SQL 语句 失败 时 调用 的 回调 函数 ， 该 回调 函数 的 传递 方法 如 下 : 
function errorHandler(transaction,errmsg){ 
/执行 SQL 语句 出 错时 的 处 理 
k 
该 回调 函数 有 两 个 参数 : 第 一 个 参数 为 transaction 对 象 ， 第 二 个 参数 为 执行 发 生 错 误 时 
的 错误 提示 文字 。 
那么 ， 当 执行 查询 操作 时 ， 如 何 从 查询 到 的 结果 数据 集中 一 次 性 把 数据 取出 并 显示 到 页 
面 上 呢 ? 最 直接 的 方法 就 是 for 循环 语句 。 结 果 数据 集 对 象 有 一 个 rows 属性 ， 其 中 保存 了 查 
询 到 的 每 条 记录 ， 记 录 的 条 数 可 以 用 rows.length 获取 。 可 以 用 for 循环 ， 以 rows[index] 或 
rows.Item([index]) 的 形式 依次 取出 每 条 数据 记录 。 在 JavaScript 脚本 中 ， 一般 采 用 rows[index] 
的 形式 。 需 要 注意 的 是 ， 在 Chrome 浏览 器 中 ， 不 支持 rows.Item([index]) 的 形式 。 
【 例 7-5】 创 建 数 据 库 mydatabase, 然后 创建 数据 表 tablel; 对 tablel 执行 数据 插入 操作 ， 
插入 两 条 记录 。 
var db = openDatabase('mydatabase''1.0''my db',2*1024); 
db.transaction(function(tx)) ( 
tx.executeSql(CREATE TABLE IF NOT EXISTS tablel(id uniquelog)): 
tx executeSqI(INSERT INTO tablel(id log) VALUES(1,"foobar")'); 
tx.executeSql( INSERT INTO tablel(id.log) VALUES(."logmsg")"); 
D 
在 插入 新 的 记录 时 ， 还 可 以 传递 动态 值 : 
var db = openDatabase('mydatabase' 1.0 /my db',2*1024); 
db.transaction(function(tx)) ( 
tx.executeSq( CREATE TABLE IF NOT EXISTS tablel (id unique og): 
tx.executeSql(INSERT INTO tablel(id.log) VALUES(?.?). [e id.e log]): 

















J): 
【 例 7-6】 获取 已 经 存在 的 数据 记录 ， 通 过 for 循环 显示 每 条 记录 。 
db.transaction(function(tx) ( 


tx.executeSql SELECT * FROM tablel,[].function(tx.results) { 
var len = results.rows length; 
msg = "<p>Found rows:" + len + "</p>"; 
document.querySelector('status").innerHTML += msg: 
for(i=0;i<len;i+H){ 
alert(results.rows.item(1).log): 
} 
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jnull); 
D 


7.3.3 创建 一 个 简单 的 数据 库 

本 节 将 完整 地 演示 Web SQL Database API 的 使 用 ， 包 括 建立 数据 库 、 建 立 表 格 、 插 入 数 
据 、 查 询 数 据 、 将 查询 结果 呈现 到 页 面 中 。 

【 例 7-7】 创建 一 个 简单 的 数据 库 由 ， 在 该 数据 库 中 建立 数据 表 logs: 向 logs 数据 表 中 
插入 两 条 数据 ;查询 数据 ， 将 查询 到 的 结果 显示 出 来 。 





程序 代码 如 下 : 
<head> 
<meta charset="UTF-8"> 
<title> 数 据 库 操作 </title> 
<script type="text/javascript"> 
var db = openDatabase('db','1.0','TestDB',2*1024*1024); 
var msg; 
db.transaction(function(tx) ( 
tx.executeSql CREATE TABLE IF NOT EXISTS logs(id unique.log)); 
tx.executeSql(INSERT INTO logs(id.log) VALUES(1."foobar")); 
tx.executeSql( INSERT INTO logs(id,log) VALUES(2,"logmsg")'); 
msg ='<p> 完 成 消息 创建 和 插入 行 操作 。</p>'; 
document.querySelector('#status').innerHTML = msg; 
» 
db.transaction(function(tx) { 
tx.executeSql SELECT * FROM logs" [].function(tx.results) ( 
var len = results.rows.length.i; 
msg= "<p> 查 询 行 数 : "Hent"«/p»": 
document.querySelector(status").innerHTML += msg; 
for(i=0;i<len;H+){ 
msg="<p><b>"+results.rows.item(i).log + "</b></p>"; 
document.querySelector(status").innerHTML += msg; 
) 
);null): 
D: 
</script> 
</head> 
<body> 
<div id="status" name="status"></div> 
</body> 


运行 以 上 程序 ， 效 果 如 图 7-4 所 示 。 
在 以 上 程序 中 ， 通 过 openDatabase 方法 建立 了 一 个 名 为 db 的 数据 库 ， 版 本 号 为 .0， 描 
述 信息 为 TestDB， 大 小 为 2MB: 
var db = openDatabase('db','1.0','TestDB',2*1024*1024): 
接 下 来 在 db 数据 库 中 建立 数据 表 logs， 然 后 执行 后 面 两 个 插入 操作 ， 揪 入 两 条 数据 
记录 : 
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db.transaction(function(tx) ( 
tx.executeSgl CREATE TABLE IF NOT EXISTS logs(id unique.log)): 
tx executeSqI(INSERT INTO logs(id.log) VALUES(1,"foobar"))): 
tx.executeSql( INSERT INTO logs(id.log) VALUESQ,"logmsg")"; 
msg='<p> 完 成 消息 创建 和 插入 行 操作 。</p>' 
document querySelector(#status') innerHTML = msg; 

3»: 

接 下 来 查询 数据 ， 并 将 查询 到 的 数据 取出 来 ， 显 示 到 页 面 上 : 
db.transaction(function(tx) { 
tx.executeSql(SELECT* FROM logs' [].function(tx.results) ( 

var len = results.rows.length.i; 

msg= "<p> 查 询 行 数 : "+Hent"</p>"; 

document.querySelector(status").innerHTML += msg: 

for(i-0:i-leni-?)( 
msg="<p><b>"+results.rows.item(i).log + "</b></p>"; 
document.querySelector(status") innerHTML += msg; 
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KBO GE, 
可 和 数 : 2 

foobar 

logmsg 





图 7-4 创建 的 数据 库 和 数据 表 





7.34 综合 应 用 一 一 点 评 功能 


Web 存储 采用 一 对 一 的 数据 读 写 方法 来 读 取 数据 ， 主 要 通过 getltem 方法 来 读 取 。 但 在 
实际 项 目 中 ， 涉 及 数据 交互 的 功能 一 般 保存 的 数据 都 比较 复杂 ， 数 据 量 都 比较 大 ， 因 此 这 种 
一 对 一 的 读 取 少 量 数据 的 方法 反而 用 得 比较 少 。 

例如 ， 以 一 个 简单 的 Web 点 评 功能 为 例 ， 分 析 一 下 如 何 使 用 Web 存储 来 保存 和 读 取 大 
量 数据 。 使 用 一 个 多 行文 本 框 来 输入 点 评 内 容 ， 当 单 击 “ 提 交 ” 按 钮 时 ， 将 文本 框 中 的 内 容 
保存 到 localStorage 中 ， 在 表单 底部 放置 一 个 p 元 素来 显示 保存 后 的 数据 。 

如 果 只 保存 文本 框 中 的 内 容 ， 那 么 并 不 能 知道 内 容 是 什么 时 候 写 好 的 ， 所 以 在 保存 点 评 
内 容 的 同时 ， 也 要 保存 当前 日 期 和 时 间 ， 并 显示 当前 日 期 和 时 间 到 p 元 素 中 。 

利用 Web 存储 保存 数据 时 ， 数 据 必须 是 “ 键 / 值 ” 对， 所 以 将 文本 框 中 的 内 容 作为 键 值 ， 
将 保存 时 的 当前 日 期 和 时 间作 为 键 名 来 保存 ， 对 于 日 期 和 时 间 的 值 系统 以 时 间 戳 形式 管理 ， 
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所 以 保存 时 不 可 能 存在 重复 的 键 名 。 点 评 功 能 的 实现 如 下 : 
【 例 7-8】 简单 点 评 功能 。 
<title> 简 单 点 评 功 能 </title> 
«script type="text/javascript"> 
function commit(id) { 
var data = document.getElementByld(id).value; 
var time = new Date().getTime(); 
localStorage.setItem(time, data); 
alert(" 点 评 成 功 。"); 
loadcomm (msg); 








} 


function loadcomm (id) { 
var result = '«table border="1">'; 
for (vari — 0; i < localStorage.length; 1++) { 
var key = localStorage.key(i): 
var value = localStorage.getItem(key); 
var date = new Date(); 
date.setTime(key); 
var datestr = date.toGMTString(): 
result += '<tr><td> + value + '</td><td> + datestr + '</td></tr>"; 
} 
result += "</table>'; 
var target = document.getElementById(id); 
target.innerHTML = result: 
} 


function init() { 
loadcomm.clear(); 
alert(" 全 部 点 评 内 容 被 清除 。"); 
loadStorage('msg?: 
} 
</script> 
</head> 


<body> 
<hl> 点 评 <hl> 
<textarea id-"comment" cols-"60" rows="5"></textarea><br> 
<input type="button" value=" 提 交 " onclick-"commit(comment);"- 
<input type="button" value=" 清 空 " onclick="init('msg'):"> 
«hr 
<p id="msg"></p> 
</body> 
运行 以 上 程序 ， 效 果 如 图 7-5 所 示 。 在 文本 框 中 输入 要 发 表 的 点 评 内容 ， 然 后 单 击 “ 提 
交 ” 按 钮 ， 点 评 内 容 和 点 评 时 间 将 会 显示 在 下 方 的 表格 行 中 。 
在 以 上 程序 中 , 除了 输入 点 评 内容 用 的 文本 框 和 显示 数据 用 的 p 元 素 之 外 , 还 放置 了 “ 提 
交 ” 按 钮 用 于 添加 点 评 信息 ， 单 击 “ 清 空 ”按钮 可 以 清除 全 部 内 容 。 
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图 7-5 点 评 效果 


在 JavaScript 脚本 中 有 3 个 按钮 调用 函数 ， 分 别 是 commit、loadcomm 和 init， 简 单 说 明 


如 下 : 


commit 函数 : 这 个 函数 使 用 new Date.getTime( ) 语 句 得 到 当前 的 日 期 和 时 间 ， 然 后 调 
用 localStorage.setItem 方法 , 将 得 到 的 时 间作 为 键 值 , 并 将 文本 框 中 的 数据 作为 键 名 保 
存 。 保 存 后 ， 重 新 调用 脚本 中 的 loadcomm 函数 ， 在 页 面 上 重新 显示 保存 后 的 数据 。 
loadcomm 函数 : 取得 保存 后 的 所 有 点 评 内 容 ， 然 后 以 表格 的 形式 显示 。 取 得 全 部 评 
论 的 时 候 ， 需 要 用 到 localStorage 的 两 个 常用 属性 。 

localStorage.length: 返回 所 有 保存 在 localStorage 中 的 数据 的 条 数 。 

localStorage key(index): 把 想 要 得 到 数据 的 索引 编号 作为 index 参数 传 入 ， 可 以 得 到 
localStorage 中 与 这 个 索引 编号 对 应 的 数据 。 比 如 想得到 第 3 条 数据 ， 传 入 的 index 
为 2(index 从 0 开始 计算 )。 

先 用 localStorage.length 属性 获取 保存 的 数据 条 数 ， 然 后 循环 遍历 localStorage. 
key(index)， 取 得 保存 在 localStorage 中 的 全 部 数据 。 

init 函数 : 将 localStorage 中 保存 的 数据 全 部 清除 ， 在 这 个 函数 中 只 有 一 条 语句 
localStorage.clear( )。 














在 实际 项 目 开 发 中 , 经 常 需 要 以 表格 的 形式 来 组 织 数据 。 那么， 能 不 能 用 Web 存储 来 存 
储 二 维 表 形式 的 数据 呢 ? 如 果 可 以 ， 需 要 考虑 哪些 问题 ? 

例如 ， 设 计 一 个 联系 人 信息 管理 页 面 ， 联 系 人 的 联系 信息 包括 姓名 、e-mail 地 址 、 电 话 
号 码 、 备 注 列 ， 把 它们 保存 在 localStorage 中 。 如 果 输 入 联系 人 的 姓名 并 且 进行 检索 ， 可 以 获 
取 这 个 联系 人 的 所 有 联系 信息 。 

首先 , 用 联系 人 的 姓名 作为 键 名 来 保存 数据 , 这 样 获 取 联系 人 的 其 他 信息 时 会 比较 方便 。 
然后 利用 ISON 数据 格式 来 将 联系 人 的 联系 信息 分 几 列 来 保存 ， 具 体 做 法 为 : 用 JSON 格式 
作为 文本 来 保存 对 象 ， 获 取 该 对 象 时 再 通过 JSON 格式 来 获取 ， 就 可 以 在 Web 存储 中 保存 和 
读 取 复 杂 结 构 的 数据 了 。 上 基体 示 例如 下 : 

【 例 7-9】 使 用 Web 存储 来 保存 多 列 数据 。 





<script type-"text/javascript"- 
function saveComment() f 
var data — new Object; 
data.name = document.getElementById('name").value; 
data.email = document.getElementByld('email).value; 
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data.tel = document.getElementById('tel).value; 


data memo = document.getElementById(memo").value; 


var str = JSON.stringify(data); 
localStorage.setItem(data.name, str); 
alert(" 数 据 已 保存 。"); 


function searchData(id) { 


} 
</script> 

</head> 

<body> 


var find = document.getElementByld('find").value; 
var str = localStorage.getItem(find); 

var data = JSON parse(str): 

var result 二 "姓名 : " + data.name + '<br>'; 

result += "EMAIL: " + data.email + '<br>"; 

result += "电话 号 码 : "+ data.tel + '<br>'; 

result += "备注 : "+ data memo + '<br>'; 

var target = document. getElementBylId(id): 
target.innerHTML = result; 


<hl> 使 用 Web Storage 保存 多 列 数据 <hl> 


<table> 
«tr 


<A> 
<t> 


«ftr 
«t 


«ft 
<w> 


<A> 
w> 


xr 
</table> 
<h> 


<td> 姓 名 :</td> 
<td><input type="text" id="name"></td> 


<td>E-mail:</td> 
<td><input type="text" id="email"></td> 


<td> 手 机 号 :</td> 
<td><input type="text" id="tel"></td> 


<td> 备 注 :</td> 
<td><input type="text" id="memo"></td> 


<td></td> 


<td><input type="button" value=" 保 存 " onclick-"saveComment();"—/td-- 


<p><input type="text" id="find"> 


<input type="button" value=" £r ifi" onclick="searchData('msg');"> 


<p> 
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<p id="msg"></p> 
</body> 
运行 以 上 程序 ， 效 果 如 图 7-6 所 示 。 


D127.00.1:3020/ch0717 x NEN 
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使 用 Web storage 保存 多 列 数据 


EE:  ladygaga 
E-mail: [adygaga@ 153.com 
手机 号 : |13110987654 
备注 :|sasdiasd 

Lr 











fandy mm 





EMAIL landyQ163.com 
电话 号 码 : 13110290720 
备注 : sadfad 


图 7-6 用 Web 存储 保存 多 列 数据 的 效果 





上 面 的 示例 演示 了 如 何 使 用 Web 存储 保存 多 列 数据 , 也 可 以 通过 这 种 方式 来 设计 点 评 功 
能 。 下 面 来 看 一 下 怎么 使 用 Web SQL 数据 库 实 现 点 评 功能 。 
首先 ， 页 面包 含 一 个 可 以 输入 姓名 的 文本 框 ， 一 个 输入 点 评 内 容 的 文本 框 ， 以 及 一 个 保 
存 点 评 内 容 时 要 用 的 按钮 。 在 按钮 下 方 放置 一 个 表格 , 保存 数据 后 从 数据 库 中 取出 所 有 数据 ， 
显示 在 这 个 表格 中 。 单 击 按钮 时 , 调用 saveData 函数 ， 保 存 点 评 内 容 时 的 逻辑 都 在 这 个 函数 
中 实现 。 另 外 ， 打 开 页 面 时 ， 调 用 init 函数 ， 将 数据 库 中 全 部 已 保存 的 留言 信息 显示 在 表 
格 中 。 
【 例 7-10】 使 用 Web SQL 数据 库 来 实现 点 评 功能 。 
<title> 使 用 Web SQL 实现 点 评 功能 </title> 
var datatable = null; 
var db = openDatabase("MyData', ", "My Database', 102400); 


function init() ( 
datatable = document.getElementBylId("datatable"); 
showAllData(); 

) 


function removeAllData() ( 
for (var i = datatable.childNodes.length - 1; i >= 0; i—-) ( 
datatable.removeChild(datatable.childNodes[i]); 
H 
var tr = document.createElement(tr); 
var thl = document.createElement('th"): 
var th2 = document.createElement('th"): 
var th3 = document.createElement('th); 
thLinnerHTML = ' 姓 名 ': 
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th2.innerHTML=' 内 容 '; 

了 th3.innerHTML=' 时 间 '; 

tr-appendChild(th1); 

tr.-appendChild(th2); 

trappendChild(th3); 

datatable.appendChild(tr): 
5 


function showData(row) { 
var tr = document.createElement(tr); 
var td1 = document.createElement('td"); 
tdlinnerHTML = row.name; 
var td2 = document.createElement('td"); 
td2.innerHTML = row.message; 
var td3 = document.createElement('td"); 
var t = new Date(); 
t.setTime(row.time); 
td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString(); 
trappendChild(td1); 
trappendChild(td2); 
trappendChild(td3); 
datatable.appendChild(tr); 

) 


function showAllData() { 
db.transaction(function(tx) ( 

tx.executeSql"CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message 
TEXT, time INTEGER); []): 

tx.executeSql SELECT * FROM MsgData', [], function(tx, rs) { 
removeAllData(); 
for (var i = 0; i < rs.rows.length; i++) { 

showData(rs.rows.item(i)); 


» 
} 


function addData(name, message, time) { 


db.transaction(function(tx) { 
tx.executeSgl( INSERT INTO MsgData VALUES(?, ?, ?)', [name, message, time], 
function(tx, rs) { 
alert(" RIH AP sy; 
» 
function(tx, error) ( 
alert(error.source + "::" + error.message); 
D: 
3»: 
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j 

function saveData() { 
var name = document.getElementById('name").value; 
var conmment = document.getElementById('conmment").value; 
var time = new Date().getTime(): 
addData(name, conmment, time) 
showAllData(): 

} 

</script> 


运行 以 上 程序 ， 效 果 如 图 7-7 所 示 。 
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使 用 Web SQL 实现 点 评 功能 
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图 7-7 使 用 Web SQL 数据 库 实现 点 评 功能 
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过 去 传统 的 客户 端 存储 技术 大 多 使 用 Cookie 存储 数据 。 但 Cookie 并 不 安全 ， 用 户 常 将 
浏览 器 的 Cookie 功能 禁用 ， 导 致 客户 端 不 能 直接 读 取 文 件 ， 从 而 使 客户 端 几乎 没有 任何 有 效 
的 存储 技术 可 言 。 

HIMLS 为 客户 端 存储 数据 提出 了 理想 的 解决 方案 : 如 果 想 要 存储 复杂 的 数据 ， 可 以 使 用 
Web SQL 数据 库 ， 该 方法 可 以 像 客户 端 程序 一 样 使 用 SQL 语句 对 数据 库 进行 操作 ， 如 果 只 是 存 
储 简 单 的 键 / 值 对 ， 可 以 使 用 Web 存储 。 本 章 主要 介绍 了 Web 存储 和 Web SQL 数据 库 的 使 用 ， 
包括 Web 存储 的 优 缺点 、Web 存储 技术 的 相关 知识 及 应 用 、 本 地 数据 库 的 基本 概念 及 应 用 等 。 
本 地 存储 是 开发 Web 离线 应 用 的 基础 知识 之 一 ， 对 于 前 端 开发 人 员 来 说 ， 必 须 熟 练 掌握 。 


7.5 思考 和 练习 


. 简 述 Cookie 存储 的 优 缺 点 。 

. 简 述 Web 存储 诞生 的 意义 。 

. 简 述 使 用 Web 存储 技术 的 方法 。 

. 简 述 本 地 数据 库 的 概念 以 及 操作 方法 。 

. 使 用 本 地 数据 库 的 功能 ， 实 现 点 赞 功能 。 





二 


第 8 章 ”离线 应 用 程序 


过 去 要 浏览 网 站 , 必须 有 网 络 才 能 进行 浏览 。 而 HTMLS5 应 用 不 需要 始终 保持 网 络 连接 ， 
目前 主流 浏览 器 的 最 新 版 本 都 提供 对 HTMLS 缓存 技术 的 支持 .HIMLS 提供 了 一 个 供 本 地 组 
存 使 用 的 API 一 一 applicationCache， 使 用 这 个 API， 可 以 实现 离线 Web 应 用 程序 的 开发 。 
HTMLS 离线 缓存 的 核心 应 用 是 : 在 用 户 没有 Intemet 连接 时 ， 依 然 能 够 访问 站 点 或 应 用 ; 当 
IMH Intemet 连接 时 ， 自 动 更 新 缓存 数据 。 

离线 缓存 包含 两 部 分 内 容 : manifest 缓存 清单 和 JavaScript 接口 。 其 中 ，manifest 缓存 文 

件 包含 一 些 需要 缓存 的 资源 清单 ; JavaScript 接口 提供 用 于 更 新 缓存 文件 的 方法 以 及 对 缓存 文 
件 的 操作 。 

本 章 学 习 目 标 : 

o 掌握 离线 Web 应 用 程序 的 基本 概念 

o 掌握 manifest 文件 在 离线 缓存 中 的 使 用 

e 掌握 使 用 applicationCache 对 象 来 手动 更 新 缓存 的 方法 


8.1 离线 Web 应 用 程序 详解 


在 过 去 Web 的 发 展 过 程 中 ， 涌 现 出 很 多 Web 应 用 程序 ， 但 是 这 些 Web 应 用 程序 有 一 个 






























































8.1.1. 本 地 缓存 技术 产生 的 原因 


1. 用 户 参与 Web 的 需要 

Web 鼓励 个 人 参与 ， 每 个 人 都 是 Web 内 容 的 撰写 者 。 如 果 Web 应 用 能 够 提供 离线 功能 ， 
让 用 户 在 不 联网 的 情况 下 也 能 进行 内 容 的 撰写 ， 有 网 络 时 再 同步 到 Web 上, 就 能 大 大 方便 用 
户 使 用 。 

2. 间断 性 网 络 下 Web 应 用 的 使 用 需要 

越 来 越 多 的 应 用 被 移植 到 Web 上 ， 虽 然 现在 网 络 履 盖 比 以 前 好 很 多 ， 随 处 可 见 Wi-Fi, 
但 这 只 是 在 发 达 城市 才 有 如 此 的 网 络 条 件 。 许 多 应 用 的 使 用 场合 ， 比 如 室外 施工 使 用 的 辅助 
应 用 ， 通 常情 况 下 没有 WiFi 的 ， 条 件 艰苦 的 山区 ， 甚 至 没有 手机 信号 。 这 种 情况 下 ， 本 地 
缓存 能 发 挥 极 大 的 作用 ， 只 要 在 本 地 存储 了 应 用 资源 ， 无 论 是 否 连 接 网 络 都 可 用 。 随 着 完全 依 
赖 浏 览 器 的 设备 的 出 现 ，Web 应 用 程序 在 不 稳定 的 网 络 状况 下 还 能 持续 工作 就 变 得 更 加 重要 
了 。 这 方面 ， 不 需要 持续 连接 网 络 的 桌面 应 用 程序 历来 被 认为 比 Web 应 用 程序 更 有 优势 。 


8.1.2 ”本 地 缓存 概述 
HTMLS5 的 缓存 控制 机 制 综 合 了 Web 应 用 和 桌面 应 用 两 者 的 优势 , 基于 Web 技术 构建 的 
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Web 应 用 程序 ， 可 在 浏览 器 中 运行 并 在 线 更 新 ， 也 可 在 脱 机 情况 下 使 用 。 然 而 ， 因 为 目前 的 
Web 服务 器 不 为 脱 机 应 用 程序 提供 任何 默认 的 缓存 行为 ， 所 以 想 要 使 用 离线 应 用 功能 ， 就 必 
须 在 应 用 中 明确 声明 。 

HTMLS 的 离线 应 用 缓存 使 得 在 无 网 络 连接 状态 下 运行 应 用 程序 成 为 可 能 ， 这 类 应 用 程 
序 用 处 很 多 ， 如 起 草 电子 邮件 草稿 时 就 不 需要 连接 互联 网 。HTMLS5 中 引入 的 离线 应 用 缓存 ， 
使 得 Web 应 用 程序 可 以 在 没有 网 络 连接 的 情况 下 运行 。 

应 用 程序 开发 人 员 可 以 指定 HTMLS 应 用 程序 中 的 资源 (如 HTML. CSS. JavaScript 脚 
本 和 图 像 等 ) 在 脱 机 时 可 用 。 离 线 应 用 的 应 用 场合 有 阅读 和 撰写 电子 邮件 、 编 辑 文档 、 编 辑 和 
显示 演示 文稿 、 离 线 访问 Web 应 用 等 。 

使 用 离线 缓存 , 避免 了 加 载 应 用 程序 时 所 需 的 常规 网 络 请 求 。 如 果 缓 存 清单 文件 manifest 
是 最 新 的 ， 浏 览 器 就 不 检查 其 他 资源 是 否 最 新 。 大 部 分 应 用 程序 可 以 非常 快 地 从 本 地 应 用 组 
存 中 加 载 完 成 。 此 外 ， 从 缓存 中 加 载 资源 可 以 节省 带宽 ， 不 必用 多 个 HTTP 请 求 确定 资源 是 
和 否 已 经 最 新 ， 这 对 于 移动 Web 应 用 来 说 至 关 重 要 。 

通过 HIMLS 的 本 地 缓存 技术 ， 开 发 人 员 可 以 直接 控制 应 用 程序 组 在。 利用 缓存 清单 文 
{F manifest 可 以 将 相关 资源 组 织 到 同一 个 逻辑 应 用 中 , 这 样 Web 应 用 程序 就 有 了 本 来 只 属于 
桌面 应 用 程序 的 特性 。 

在 缓存 清单 文件 中 标识 的 资源 构成 了 应 用 缓存 ， 它 是 浏览 器 持久 性 存储 资源 的 地 方 ， 通 
常 在 硬盘 上 。 有 些 浏览 器 向 用 户 提供 了 查看 应 用 缓存 中 数据 的 方法 ,例如 , 在 Firefox 浏览 器 
tH, about:cache 页 面 会 显示 应 用 缓存 的 详细 信息 ,提供 查看 缓存 中 每 个 文件 的 方法 ,如 图 8-1 
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图 8-1 Firefox 下 的 本 地 缓存 选项 


8.1.3 ”本 地 缓存 与 浏览 器 网 页 缓存 的 区 别 
在 没有 HIMLS 的 本 地 缓存 之 前 , Web 应 用 程序 开发 依赖 网 页 缓存 来 实现 离线 使 用 。Web 
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应 用 程序 的 本 地 缓存 与 浏览 器 的 网 页 缓存 在 许多 方面 都 存在 着 明显 的 区 别 。 首 先 ， 本 地 缓存 
是 为 整个 Web 应 用 程序 服务 的 ， 而 浏览 器 的 网 页 缓存 只 服务 于 单个 网 页 。 任 何 网 页 都 具有 网 
页 缓存 ， 而 本 地 缓存 只 缓存 那些 指定 缓存 的 网 页 。 其 次 ， 网 页 缓存 也 是 不 安全 、 不 可 靠 的 
因为 我 们 不 知道 在 网 站 中 到 底 缓存 了 哪些 网 页 ， 以 及 缓存 了 网 页 上 的 哪些 资源 。 而 本 地 缓存 
是 可 靠 的 ， 我 们 可 以 控制 对 哪些 内 容 进 行 缓存 ， 不 对 哪些 内 容 进 行 缓存 ， 开 发 人 员 还 可 以 上 
编程 的 手段 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属性 、 状 态 和 事件 来 开发 出 更 为 强大 的 
离线 应 用 程序 。 


8.1.4 浏览 器 支持 检测 


目前 各 大 浏览 器 都 支持 HIMLS 离线 应 用 。 在 使 用 离线 应 用 API 前 ， 最 好 使 用 脚本 先 检 
测 浏览 器 是 否 支持 。 检 测 方法 如 下 : 
if(window.applicationCache) ( 
/浏览 器 支持 离线 应 用 
Jelset 
/浏览 器 不 支持 离线 应 用 
































j 
82 HTMLS 离线 应 用 详解 


当 准 备 开 发 基于 HTMLS 离线 缓存 的 应 用 时 ， 首 先 要 配置 Web 服务 器 ， 因 为 Web 服务 
器 默认 不 支持 HIML5 离线 缓存 应 用 ， 所 以 首先 要 开启 离线 缓存 的 支持 功能 ， 然 后 创建 一 个 
应 用 ， 创 建 完毕 后 ， 在 服务 器 端 创建 并 配置 manifest 文件 ， 列 出 应 用 需要 缓存 的 资源 列表 ; 
最 后 在 需要 应 用 缓存 资源 的 HIML 文件 中 引用 manifest 文件 。 下 面 详细 讲解 这 些 操作 。 


8.2.1 Web 服务 器 配置 


因为 Web 服务 器 默认 不 支持 离线 存储 的 应 用 ， 所 以 需要 手动 修改 Web 服务 器 配置 ， 在 
服务 器 mine.types 文件 中 添加 支持 配置 。 为 什么 要 添加 支持 配置 ? 因为 做 离线 存储 必须 要 有 
manifest 文件 来 存储 需要 缓存 在 用 户 机 器 上 的 资源 路 径 , iH. manifest 文件 的 路 径 将 在 HTML 
页 面 中 使 用 。 

本 节 主 要 以 常用 的 Web 服务 器 Apache 和 Python 为 例 进行 配置 。 

1. Apache 服务 器 的 配置 

打开 Apache 的 安装 目录 ， 找 到 conf 文件 夹 下 的 mime.types 文件 ， 如 图 8-2 所 示 ， 添 加 
下 面 一 行 代码 : 
text/cache-manifest manifest 
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图 8-2 ”在 mime types 中 添加 离线 存储 支持 
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2. Python 服务 器 的 配置 
Python 标准 库 中 的 SimpleHTTPServer 模块 为 扩展 名 为 .manifest 的 文件 配 以 头 部 信息 
content-type:text/cache-manifest。 配 置 方法 为 : 打开 PYTHON HOME/Lib/mimetypes.py 文件 
并 添加 一 行 代码 。 
‘manifest':'text/cache-manifest manifest': 
8.22 manifest 文件 结构 与 含义 


manifest 文件 的 用 途 是 列 出 需要 缓存 的 文件 清单 。manifest 文件 是 一 个 文本 文件 , 编码 格 
式 必须 为 UTF-8。 该 文件 没有 强制 的 后 绥 名 ， 但 习惯 以 manifest 为 后 绥 名 。 下 面 是 一 个 标准 
格式 的 manifest 文件 。 
【 例 8-1】 创建 一 个 标准 的 manifest 文件 ， 并 在 该 文件 中 指定 需要 缓存 的 资源 文件 。 

CACHE MANIFEST 

#version 1.0 

login.html 

register.html 

findpwd.html 

css/style.css 

imgs/alipay-i-logo-big.png 

imgs/alipay-i-icons.png 

js/mui-min.js 

CACHE 

index.html 

home.css 

imgs/logo.png 

js/main js 

NETWORK: 

imgs/button-ok.png 


imgs/button-cancle.png 
CACHE: 


imgs/login-slider-bg.png 
FALLBACK: 
imgs/alipay-bank-icbc.png imgs/alipay-bank-cmb.png 

对 manifest 文件 的 说 明 如 下 : 

1. manifest 文件 内 容 的 基本 格式 

e 每 个 站 点 都 有 SMB 用 来 存储 这 些 数据 ， 如 果 manifest 文件 或 所 列 资源 无 法 加 载 ， 整 
个 缓存 更 新 过 程 将 无 法 进行 ， 浏 览 器 会 使 用 最 后 一 次 成 功 的 缓存 。 

e 第 一 行 必 须 以 CACHE MANIFEST 开头 ， 紧 接着 是 文件 的 路 径 或 注释 。 如 果 没 有 指 
定 标题 ， 默 认 就 是 CACHE MANIFEST 部 分 。 

e 注释 必须 以 “# ”开头 。 注 释 标识 符 还 有 一 个 作用 ，Web 应 用 缓存 只 在 manifest 文件 
被 修改 的 情况 下 才 会 被 更 新 ， 所 以 如 果 只 是 修改 了 被 缓存 的 文件 ， 那 么 本 地 缓存 不 
会 被 更 新 ， 这 时 可 以 修改 manifest 文件 的 注释 来 告诉 浏览 器 需要 更 新 缓存 。 

e 在 CACHE MANIFEST 区 块 中 列 出 的 文件 ， 无 论 应 用 程序 是 否 在 线 ， 浏 览 器 都 会 从 
应 用 程序 缓存 中 获得 这 些 文件 。 先 写 CACHE MANIFEST， 然 后 换行 ， 每 行 的 换行 
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符 可 以 是 CR、LF 或 CRLF。 

e CACHE 是 manifest 文件 的 默认 入 口 。 在 入 口 之 后 罗列 的 文件 ， 或 直接 写 在 CACHE 
MANIFEST 之 后 的 文件 ， 在 下 载 到 本 地 后 会 缓存 起 来 。 

e 在 NETWORK 部 分 罗列 的 资源 ， 即 便 有 缓存 ， 也 会 跳 过 缓存 而 访问 服务 器 。 即 
NETWORK 部 分 罗列 的 资源 ， 无 论 在 缓存 中 存在 与 否 ， 均 从 网 络 获 取 。 

e FALLBACK 用 于 增加 备份 ， 下 方 两 个 资源 文件 之 间 有 一 个 空格 ， 代 表 的 含义 是 : 当 
第 一 个 文件 缓存 不 成 功 或 无 法 找到 时 ， 就 缓存 第 二 个 文件 。 例 如 ， 以 下 代码 表示 ， 
当 无 法 获取 app/ajax 时 ， 对 app/ajax 及 子路 径 的 所 有 请 求 都 会 被 转发 给 defaulthtml 
页 面 处 理 。 
SAX SCUE 
about.html 
style.css 
help.html 
# 不 缓存 注册 页 面 
NETWORK 
Tegisterhtml 
FALLBACK 
/app/ajax default.html 
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创建 好 cacheContentmanifest 文件 之 后 ， 下 面 在 HIML 文件 中 指定 文档 的 manifest 属性 
为 cacheContentmanifest 文件 的 路 径 。 
<html manifes 人 "cacheContentmanifest">……- </html> 
这 个 manifest 文件 的 路 径 用 绝对 路 径 或 相对 路 径 都 行 ， 甚 至 可 以 引用 其 他 服务 器 上 的 
manifest 文件 。 该 文件 对 应 的 mime-type 应 该 是 text/cache-manifest， 所 以 需要 配置 服务 器 来 
发 送 对 应 的 MIME 类 型 信息 (前 面 已 介绍 配置 )。 
更 新 离线 存储 的 数据 ， 有 以 下 3 种 方法 : 
e 清除 离线 存储 的 数据 。 这 不 一 定 通 过 清理 浏览 器 历史 记录 就 可 以 做 到 ， 因 为 不 同 浏 
览 器 管理 离线 存储 的 方式 不 同 。 例如， 在 Firefox 中 需要 选择 “选项 ”|“ 高 级 ”|“ 网 
络 ”|“ 脱 机 存储 ”命令 ， 然 后 在 其 中 清除 离线 存储 数据 。 
e 修改 manifest 文件 。 即 便 修 改 manifest 文件 中 罗列 的 文件 ， 也 不 会 更 新 缓存 ， 而 是 要 
更 新 manifest 文件 。 
e 使 用 JavaScript 编写 更 新 脚本 。 


8.2.4 ”离线 应 用 中 浏览 器 和 服务 器 的 交互 过 程 


当 使 用 离线 Web 应 用 程序 进行 工作 时 ， 有 必要 理解 一 下 浏览 器 和 服务 器 之 间 的 交互 过 
程 。 壁 如 有 一 个 http:/wwwtestcom 网 站 ， 以 index.html 为 主页 ， 该 主页 使 用 index.manifest 
文件 为 缓存 清单 文件 , 在 该 文件 中 请 求 本 地 缓存 index.html, main js. main.css, btnl jpg. btn2.jpg 
这 几 个 资源 文件 。 

1. 首次 访问 网 站 时 的 交互 过 程 

首次 访问 网 站 时 ， 浏 览 器 和 服务 器 的 交互 过 程 如 下 : 
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(1) 浏览 器 请 求 访 问 http://www.test.com. 

(2) 服务 器 返回 index.html 页 面 。 

(3) 浏览 器 解析 index.html 页 面 ， 请 求 页 面 上 所 有 的 资源 文件 ， 包 括 HTML 文件 、 图 像 
文件 、CSS 文件 、JavaScript 脚本 文件 以 及 manifest 文件 。 

(4) 服务 器 返回 所 有 资源 文件 。 

(5) 浏览 器 处 理 manifest 文件 ， 请 求 manifest 文件 中 所 有 要 求 本 地 缓存 的 文件 ， 包 括 
index.html 页 面 本 身 ， 即 使 刚才 已 经 请 求 过 这 些 文件 。 如 果 要 求 本 地 缓存 所 有 文件 ， 这 将 是 一 
个 比较 长 的 重复 请 求 过 程 。 

(6) 服务 器 返回 所 有 要 求 本 地 缓存 的 文件 。 

(7) 浏览 器 对 本 地 缓存 进行 更 新 ， 存 入 包括 页 面 本 身 在 内 的 所 有 要 求 本 地 缓存 的 资源 文 
件 ， 并 且 触 发 一 个 事件 ， 通 知 本 地 缓存 被 更 新 。 

2. 已 有 本 地 缓存 的 交互 过 程 

现在 浏览 器 已 经 把 本 地 缓存 更 新 完毕 。 如 果 再 次 打开 浏览 器 并 访问 http:/wwwtestcom 
网 站 ， 而 且 manifest 文件 没有 被 修改 过 ， 交 互 过 程 如 下 : 

(1) 浏览 器 再 次 请 求 访问 http://wwwi.test.com。 

Q) 浏览 器 发 现 这 个 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 index html 页 面 。 

G) 浏览 器 解析 index.html 页 面 ， 使 用 所 有 本 地 缓存 中 的 资源 文件 。 

(4) 浏览 器 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 返回 一 个 304 状态 码 ， 通 知 浏览 器 manifest 没有 发 生变 化 。 

只 要 页 面 上 的 资源 文件 被 本 地 缓存 过 ， 下 次 浏览 器 打开 这 个 页 面 时 ， 总 是 先 使 用 本 地 组 
存 中 的 资源 ， 然 后 请 求 manifest 文件 。 

3. 已 有 本 地 缓存 但 manifest 文件 已 更 新 的 交互 过 程 

如 果 再 次 打开 浏览 器 时 manifest 文件 已 经 被 更 新 过 ， 那 么 浏览 器 和 服务 器 之 间 的 交互 过 
程 如 下 : 

(1) 浏览 器 再 次 请 求 访问 http://wwwi.test.com。 

O) 浏览 器 发 现 这 个 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 index html 页 面 。 

G) 浏览 器 解析 index.html 页 面 ， 使 用 所 有 本 地 缓存 中 的 资源 文件 。 

(4) 浏览 器 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 返回 更 新 过 的 manifest 文件 。 

(6) 浏览 器 处 理 manifest 文件 ， 发 现 该 文件 已 被 更 新 ， 于 是 请 求 所 有 要 求 进行 本 地 缓存 
的 资源 文件 ， 包 括 index html 页 面 本 身 。 

(7) 浏览 器 返回 要 求 进行 本 地 缓存 的 资源 文件 。 

(8) 浏览 器 对 本 地 缓存 进行 更 新 ， 存 入 所 有 新 的 资源 文件 ， 并 且 触 发 一 个 事件 ， 通 知 浏 
览 器 本 地 缓存 已 被 更 新 。 

需要 注意 的 是 ， 即 使 资源 文件 被 修改 过 ,在 上 面 的 步骤 (3) 中 已 经 装 入 的 资源 文件 也 不 会 
发 生变 化 ， 壁 如 图 片 不 会 突然 变 成 新 的 图 片 ， 脚 本 文件 也 不 会 突然 使 用 新 的 脚本 文件 。 也 就 
是 说 ， 这 时 更 新 过 的 本 地 缓存 中 的 内 容 不 能 被 自动 使 用 ， 只 有 重新 打开 这 个 页 面 时 才 会 使 用 
更 新 后 的 资源 文件 。 另 外 ， 如 果 不 想 修改 manifest 文件 中 对 资源 文件 的 设置 ， 但 是 对 服务 器 
上 请 求 缓存 的 资源 文件 进行 了 修改 ， 那 么 可 以 通过 修改 版 本 号 的 方式 来 让 浏览 器 认为 
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manifest 文件 已 经 被 更 新 过 ， 以 便 重 新 下 载 修改 过 的 资源 文件 。 
83 applicationCache 对 象 


application 对 象 代表 本 地 缓存 ， 可 以 用 它 来 通知 用 户 本 地 缓存 已 经 被 更 新 ， 需 要 用 户 手 
工 更 新 本 地 缓存 。 
在 浏览 器 和 服务 器 的 交互 过 程 中 , 当 浏 览 器 对 本 地 缓存 进行 更 新 , 装 入 新 的 资源 文件 时 ， 
会 触发 applicationCache 对 象 的 updateready 事件 ， 通 知 本 地 缓存 已 被 更 新 。 可 以 利用 这 个 事 
件 告诉 用 户 一 一 本 地 缓存 已 经 被 更 新 ， 用 户 需要 手工 刷新 页 面 来 得 到 最 新 版 本 的 应 用 程序 ， 
示例 代码 如 下 : 
applicationCache.onupdateready = function() ( 
/本 地 缓存 已 经 被 更 新 ， 通 知 用 户 
alert(" 本 地 缓存 已 被 更 新 ， 可 以 按 F5 键 刷 新 页 面 以 显示 最 新 内 容 。"); 


另外 ， 可 以 通过 applicationCache 对 象 的 swapCache 方法 来 控制 如 何 进行 本 地 缓存 的 更 
新 以 及 更 新 的 时 机 。 


8.3.1 swapCache 方法 


swapCache 方法 用 来 手工 执行 本 地 缓存 的 更 新 ， 它 只 能 在 applicationCache 对 象 的 
updateReady 事件 被 触发 时 调用 。updateReady 事件 只 有 在 服务 器 上 的 manifest 文件 被 更 新 ， 并 且 
在 把 manifest 文件 中 所 要 求 的 资源 文件 下 载 到 本 地 之 后 才 会 触发 。 顾名思义 ， 这 个 事件 的 含义 是 
“本 地 缓存 准备 被 更 新 ” 当 这 个 事件 被 触发 后 , 可 以 用 swapCache 方法 手工 进行 本 地 缓存 的 更 新 。 

那么 ， 什 么 时 候 需要 手工 更 新 本 地 缓存 呢 ? 如 果 本 地 缓存 的 容量 非常 大 ， 本 地 缓存 的 更 
新 工作 将 需要 相对 较 长 的 时 间 ， 而 且 还 会 把 浏览 器 给 锁 住 。 这 时 最 好 有 一 个 提示 ， 告 诉 用 户 
正在 进行 本 地 缓存 的 更 新 ， 示 例 代码 如 下 : 

Ti 
/本 地 缓存 已 被 更 新 ， 通 知 用 户 
alert(" 正 在 更 新 本 地 缓存 ……"); 
applicationCache.swapCache(); 
alert(" 本 地 缓存 已 被 更 新 ， 可 以 按 FS 键 刷新 页 面 以 得 到 最 新 内 容 "); 
k 

如 果 不 调用 swapCache 方法 , 会 怎么 样 ? 本 地 缓存 就 不 会 更 新 了 吗 ? 不 是 , 只 是 更 新 的 时 
间 不 一 样 。 如 果 不 调用 swapCache 方法 ， 本 地 缓存 将 在 下 一 次 打开 本 页 面 时 更 新 ; 如 果 调用 了 
swapCache 方法 ， 本 地 缓存 将 被 立刻 更 新 。 因 此 ， 可 以 使 用 confirm 方法 让 用 户 自行 选择 更 新 
的 时 机 ， 是 立刻 更 新 ， 还 是 下 次 打开 页 面 时 才 更 新 ， 特 别 是 当 他 们 正在 执行 一 项 规模 较 大 的 操 
作 时 。 

另外 ， 尽 管 使 用 swapCache 方法 立刻 更 新 了 本 地 缓存 ， 但 是 并 不 意味 着 页 面 上 的 图 像 和 
脚本 文件 也 会 被 立刻 更 新 ， 它 们 都 在 重新 打开 本 页 面 时 才 会 生效 。 下 面 是 一 个 完整 的 
swapCache 方法 的 使 用 示例 。 

【 例 8-2】 使 用 swapCache 方法 手动 更 新 缓存 。 

HTML 页 面 代码 如 下 : 
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<!DOCTYPE html> 
<html manifest="swapCache.manifest"> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 swapCache 方法 手动 更 新 本 地 缓存 </title> 
«script src="js/scriptjs"></script> 
</head> 
<body onload="init0 "> 
<p> swapCache 方法 示例 </p> 
</body> 
<html> 
script js 脚本 代码 如 下 : 
function initO{ 
setInterval(function() ( 
/手工 检查 是 否 有 更 新 
applicationCache.update(); 
3,5000); 
applicationCache.addEventListener("updateready" function() ( 
这 confirm(" 本 地 缓存 已 更 新 ， 是 否 立 即 刷新 ? "){ 
/手工 更 新 本 地 缓存 
applicationCache.swapCache(): 
// 重 载 页 面 
location.reload(); 
) 
J;rue); 
} 
swapCache.manifest 文件 内 容 如 下 : 
CACHE MANIFEST 
#version 1.0 
CACHE: 
js/seript.js 
运行 HTML 页 面 ， 然 后 将 swapache manifest 文件 中 的 版 本 号 从 1.0 改 成 2.0。 返 回 页 面 ， 
JE FS 键 刷新 ， 浏 览 器 重新 请 求 Web 服务 器 ， 发 现 资源 文件 有 更 新 ，js 脚本 代码 捕获 到 该 更 
新 ， 弹 出 对 话 框 询问 用 户 是 否 需要 立即 更 新 ， 如 图 8-3 所 示 。 


© O O 12700.1:2020/ch 


127.0.0.1:8020 EF 


swapCac 


Toscar IR 





图 8-3 手动 更 新 本 地 缓存 的 对 话 框 


8.3.2 applicationCache 对 象 的 事件 


applicationCache 对 象 除 了 具有 update 和 swapCache 方法 外 , 还 有 一 系列 的 事件 。 现在 来 
对 前 面 介绍 过 的 浏览 器 和 服务 器 的 交互 过 程 所 涉及 的 内 容 进 行 扩充 讲解 ， 看 看 在 浏览 器 和 服 
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务 器 的 交互 过 程 中 这 些 事件 是 如 何 触发 的 。 

首次 访问 http://www.test.com 网 站 时 : 

(1) 浏览 器 请 求 访问 http:/wwwtestcom。 

(Q2) 服务 器 返回 index.html 页 面 。 

(3) 浏览 器 发 现 网 页 具有 manifest 属性 ， 触 发 checking 事件 ， 检 查 manifest 文件 是 否 存 
在 。 不 存在 时 , 触发 error 事件 , 表示 manifest 文件 未 找到 , 不 执行 从 步骤 (6) 开 始 的 交互 过 程 。 

(4) 浏览 器 解析 index.html 页 面 ， 请 求 页 面 上 的 所 有 资源 文件 。 

(5) 服务 器 返回 所 有 资源 文件 。 

(6) 浏览 器 处 理 manifest 文件 ， 请 求 manifest 文件 中 所 有 要 求 本 地 缓存 的 文件 ， 包 括 
index.html 页 面 本 身 ， 即 使 刚才 已 经 请 求 过 该 文件 。 如 果 要 求 本 地 缓存 所 有 文件 ， 这 将 是 一 
个 比较 长 的 重复 请 求 过 程 。 

(7) 服务 器 返回 所 有 要 求 本 地 缓存 的 文件 。 

(8) 浏览 器 触发 downloading 事件 ， 然 后 开始 下 载 这 些 资源 。 在 下 载 的 时 候 ， 周 期 性 地 触 
发 process 事件 , 开发 人 员 可 以 通过 编程 的 手段 获知 多 少 文件 已 被 下 载 ， 以 及 多 少 文件 仍 处 于 
下 载 队 列 中 的 信息 。 

(9) 下 载 结束 后 触发 cached 事件 ， 表 示 首 次 缓存 成 功 ， 存 入 所 有 要 求 本 地 缓存 的 资源 
文件 。 

再 次 访问 http:/wwwtestcom 网 站 ， 步 骤 (D)~(5) 同 上 ， 在 步骤 (53) 执 行 完毕 后 ， 浏 览 器 将 
核对 manifest 文件 是 否 被 更 新 ， 如 果 没有 更 新 ， 触 发 noupdate 事件 ， 从 步骤 (6) 开 始 的 交互 过 
程 不 会 被 执行 。 如 果 被 更 新 了 ， 继 续 执行 后 续 步 又， 在 步骤 (9) 中 不 触发 cached 事件 ， 而 是 触 
发 updateready 事件 ， 表 示 下 载 结束 ， 可 以 通过 刷新 页 面 来 使 用 更 新 后 的 本 地 缓存 ， 或 调用 
swapCache 方法 来 立刻 使 用 更 新 后 的 本 地 缓存 。 

另外 ， 在 访问 缓存 名 单 时 ， 如 果 返 回 HTTP 404 错误 (表示 资源 未 找到 ) 或 410 错误 (代表 
要 找 的 文件 已 经 不 存在 )， 则 会 触发 obsolete 事件 。 

在 整个 过 程 中 ， 如 果 任 何 和 本 地 缓存 有 关 的 处 理发 生 错 误 的 话 ， 都 会 触发 eror 事件 。 
其 中 ， 可 能 会 触发 error 事件 的 情况 有 以 下 几 种 : 

e 缓存 名 单 返回 一 个 HTTP 404 错误 或 410 错误 。 

e 缓存 名 单 可 以 找到 且 没有 更 新 ， 但 引用 缓存 名 单 的 HIML 页 面 不 能 正确 下 载 。 

o 缓存 名 单 可 以 找到 但 已 被 更 改 ， 浏 览 器 不 能 下 载 某 个 缓存 名 单 中 列 出 的 资源 。 

e 开始 更 新 本 地 缓存 时 ， 缓 存 名 单 再 次 被 更 改 。 

【 例 8-3】 applicationCache 事件 演示 。 

HTML 演示 页 面 的 代码 如 下 : 

<!DOCTYPE html> 
<html manifest="eventDemo.manifest"> 
<head> 
<meta charset="UTF-8"> 
<title>applicationCache 事件 演示 </title> 
script type-"text/javascript- 
function init ( 
var output = document.getElementBylId("output"); 
applicationCache.addEventListener("checking" function()( 
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output innerHTMI -4—"checking.-br-"; 
j,true); 
applicationCache.addEventListener("noupdate" furction()( 
output.innerHTML:—"noupdate-br-": 
j,true); 
applicationCache.addEventL istener(" downloading" funcrion() ( 
output.innerHTML:—"downloading-br-": 
j,true); 
applicationCache.addEventListener("process" function) { 
output.innerHTML+="process<br>"; 
},true); 
applicationCache.addEventListener("updateready" function) ( 
output. innerHTML+="updateready<br>"; 
j,true): 
applicationCache.addEventListener(" cached" furction()( 
output.innerHTML+="cached<br>"; 
j,true): 
applicationCache.addEventL istener("error" function) ( 
output.innerHTML+="error<br>"; 
j,true): 
} 
<script> 
</head> 
<body onload="init0"> 
<h2>applicationCache 事件 演示 </h2> 
<p id="output"></p> 
</body> 
</html> 
eventDemo.manifest 文件 的 内 容 如 下 (8-3.html 为 当前 页 面 ): 
CACHE MANIFEST 
#version 1.0 
CACHE: 
8-3.html 
运行 以 上 程序 ， 当 程序 没有 更 新 时 效果 如 图 8-4 所 示 ; 修改 资源 文件 的 版 本 号 为 20， 然 
后 刷新 页 面 ， 效 果 如 图 8-5 所 示 。 
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图 8-4 没有 更 新 时 的 显示 效果 图 8-5 资源 文件 被 更 新 时 的 显示 效果 
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84 ”缓存 网 站 的 首页 


下 面 通过 一 个 完整 的 例子 来 说 明 创建 离线 应 用 的 过 程 。 当 然 ， 如 果 要 涉及 更 加 复杂 的 离 
线 应 用 ， 还 需要 读者 结合 HIMLS 中 其 他 的 新 技术 ， 进 行 更 加 复杂 的 设置 才 行 。 


8.4.1 新建 HTML5 页 面 




















添加 HTML5 DOCTYPE， 创 建 符合 规范 的 HTMLS 文档 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 缓 存 网 站 首页 </title> 
<link href-"css/style.css" type="text/css" rel="stylesheet" media="screen"> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 
</head> 
<body> 
<div id="container"> 
<header class="ma-class-en-css"> 
hl id="logo"><a href="#">AI</a></h1> 
</header> 
<div id="content"> 
<h2> 人 工 智能 <h2> 
<p> 人 工 智能 是 计算 机 科学 的 一 个 分 支 ， 它 试图 了 解 智能 的 实质 ， 并 生产 出 一 种 
新 的 能 以 人 类 智能 相似 的 方式 做 出 反应 的 智能 机 器 ， 该 领域 的 研究 包括 机 器 人 、 语 言 识别 、 图 像 识 别 、 
自然 语言 处 理 和 专家 系统 等 。 人 工 智能 自 诞生 以 来 ， 理 论 和 技术 日 益 成 熟 ， 应 用 领域 也 不 断 扩大 ， 可 以 
设想 ， 未 来 人 工 智 能 带 来 的 科技 产品 ， 将 会 是 人 类 智慧 的 “容器 ”。</p> 
<p> 人 工 智能 是 一 门 极 富 挑战 性 的 科学 ， 从 事 这 项 工作 的 人 必须 懂得 计算 机 知 
识 、 心 理学 和 哲学 。 人 工 智能 是 一 门 涉猎 十 分 广泛 的 科学 ， 它 由 不 同 的 领域 组 成 ， 如 机 器 学 习 、 计 算 机 
视觉 等 。 总 的 来 说 ， 人 工 智能 研究 的 一 个 主要 目标 是 使 机 器 能 够 胜任 一 些 通 常 需要 人 类 智能 才能 完成 的 
复杂 工作 。 但 不 同 的 时 代 、 不 同 的 人 对 这 种 “复杂 工作 ”的 理解 是 不 同 的 。</p> 
</div> 
<footer>“ 人 工 智能 ”概念 来 自 <a hre 全 "六 > 百度 百科 </a></footer> 
</div> 
</body> 
</html> 


将 以 上 代码 另存 为 8-4html， 放 到 站 点 的 根 目 录 下 。 
8.4.2 ”添加 .htaccess 支持 


在 创建 用 于 缓存 页 面 的 manifest 清单 文件 之 前 , 首先 需要 为 Web 服务 器 配置 本 地 缓存 支 
持 。 前 面 介绍 了 如 何 修改 Apache 的 mime.types 文件 , 这 里 再 介绍 如 何 通过 .htaccess 文件 进行 
配置 : 在 网 站 的 根 目录 下 找到 .htaccess 文件 ， 如 果 没 有 ， 创 建 一 个 ， 然 后 添加 下 面 的 内 容 : 
AddType text/cache-manifest .manifest 
该 指令 可 以 确保 每 个 manifest 文件 为 text/cache-manifest MIME 类 型 。 如 果 MIME 类 型 
不 对 ， 那 么 整个 清单 将 没有 任何 效果 ， 页 面 将 无 法 离线 使 用 。 
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说 明 : htaccess 文件 被 称 为 分 布 式 配置 文件 ， 它 是 Apache 服务 器 中 的 一 个 配置 文件 ， 提 
供 了 针对 目录 改变 配置 的 方法 ， 负 责 相 关 目 录 下 的 网 页 配置 。 通 过 该 文件 ， 可 以 帮助 用 户 实 
现 网 页 重 定向 、 自 定义 错误 页 面 、 改 变 文 件 扩展 名 、 允 许 或 组 织 特定 的 用 户 或 目录 访问 、 禁 
止 目录 列表 、 配 置 默 认 文档 等 功能 。 


8.4.3 创建 manifest 文件 


配置 服务 器 支持 之 后 ， 接 下 来 创建 manifest 文件 。 新 建 一 个 文本 文件 ， 另 存 为 
offline.manifest。 注 意 ， 该 文件 必须 采用 UTF-8 编码 格式 。 然 后 输入 以 下 内 容 : 
CACHE MANIFEST 
8-4html 
css/style.css 
img/image.jpg 
imp/notre-dame.jpg 
在 CACHE 声明 之 后 ， 罗 列 了 所 有 需要 缓存 的 文件 。 
8.4.4 XE% manifest 文件 到 HTML5 RE 
创建 并 保存 manifest 文件 之 后 , 接着 需要 将 manifest 文件 关联 到 HTML 页 面 。 使 用 html 
元 素 的 manifest 属性 进行 关联 ， 代 码 如 下 : 
<html lang="en" manifest="offline.manifest"> 
8.4.5 ”测试 离线 应 用 
到 此 为 止 , 对 整个 网 站 首页 的 缓存 设置 已 经 完毕 。 运行 HTMLS 页 面 , 然后 修改 manifest 
文件 的 版 本 , 再 回 到 浏览 器 , 按 FS 键 刷新 页 面 , 在 控制 台中 可 以 看 到 图 8-6 所 示 的 提示 信息 。 
在 改变 版 本 号 后 ， 浏 览 器 显示 本 地 缓存 中 的 页 面 ， 然 后 解析 manifest 文件 ， 发 现 有 更 新 ， 于 
是 向 服务 器 请 求 所 有 资源 ， 最 后 保存 到 本 地 ， 触 发 缓存 更 新 事件 。 


























8-6 在 更 新 manifest 文件 的 内 容 后 ， 刷 新 页 面 时 输出 的 控制 台 信 息 
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&5 本 章 小 结 


过 去 要 浏览 网 站 , 必须 有 网 络 才 能 进行 浏览 。 而 HTMLS 应 用 不 需要 始终 保持 网 络 连接 ， 
目前 主流 浏览 器 的 最 新 版 本 都 提供 对 HTMLS5 缓存 技术 的 支持 .HIMLS 提供 了 一 个 供 本 地 组 
存 使 用 的 API 一 一 applicationCache， 使 用 这 个 API， 可 以 实现 离线 Web 应 用 程序 的 开发 。 
HTMLS 离线 缓存 的 核心 应 用 是 : 在 用 户 没 有 Intemet 连接 时 ， 依 然 能 够 访问 站 点 或 应 用 ， 当 
用 户 有 Intemet 连接 时 ， 自 动 更 新 缓存 数据 。 

本 章 对 HTMLS 离线 缓存 技术 进行 了 详细 讲解 。 离 线 缓存 包含 两 部 分 内 容 : manifest 组 
存 清单 和 JavaScript 接口 。 其 中 ,manifest 缓存 文件 包含 一 些 需要 缓存 的 资源 清单 ; JavaScript 
接口 提供 用 于 更 新 缓存 文件 的 方法 以 及 对 缓存 文件 的 操作 。 在 讲解 离线 技术 的 过 程 中 ， 分 别 
讲解 了 本 地 缓存 技术 产生 的 原因 、 本 地 缓存 概述 、 浏 览 器 对 本 地 缓存 的 支持 ; 在 使 用 离线 组 
存 技术 时 的 服务 器 配置 方法 ，applicationCache 对 象 的 使 用 ， 最 后 ， 通 过 一 个 缓存 网 站 首页 的 
示例 ， 展 示 了 如 何 使 用 HTMLS5 缓存 技术 。 

目前 技术 发 展 越 来 越 快 ， 但 实际 项 目 需求 的 发 展 比 技术 发 展 更 快 ， 很 多 项 目 需要 搬 到 
Web 网 站 上 ,但 用 户 却 希望 Web 应 用 也 能 拥有 桌面 应 用 那样 的 性 能 。 因 此 ， 对 于 前 端 工程 师 
Kik, HTMLS 离线 技术 是 个 绝妙 的 工具 。 


8.6 ”思考 和 练习 


- 本 地 缓存 技术 产生 的 原因 是 什么 ? 

. 本 地 缓存 与 浏览 器 网 页 缓存 的 区 别 是 什么 ? 

. 在 开发 离线 应 用 时 ， 如 果 服务 器 端 使 用 的 是 Apache Web 服务 器 ， 应 如 何 配置 ? 
. manifest 文件 的 结构 如 何 ? 请 简 述 结构 中 各 节 的 含义 。 

- 当 使 用 离线 缓存 技术 时 ， 首 次 访问 网 站 时 ， 客 户 端 和 服务 器 是 如 何 交互 的 ? 

. 若 网 站 已 有 本 地 缓存 ， 客 户 端 再 次 访问 服务 器 时 ， 如 何 交互 ? 

. 在 已 有 本 地 缓存 但 manifest 文件 已 更 新 的 情况 下 ， 客 户 端 和 服务 器 如 何 交互 ? 
. 请 搭建 8.4 节 “ 缓 存 网 站 的 首页 ”中 的 环境 ， 并 加 以 实践 。 
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本 章 介绍 HTMLS 中 新 增 的 与 线程 相关 的 一 个 功能 一 一 使 用 Web Workers 来 实现 Web ^f 
台 上 的 多 线程 处 理 功能 。 通 过 Web Workers， 可 以 创建 一 个 不 会 影响 前 端 处 理 的 后 台 线 程 ， 
并 且 在 这 个 后 台 线 程 中 创建 多 个 子 线程 。 通 过 Web Workers， 可 以 将 耗 时 较 长 的 处 理 交 给 后 
台 线 程 去 处 理 ， 从 而 避免 了 过 去 因为 某 个 处 理 耗 时 过 长 而 弹出 一 个 对 话 框 ， 提 示 用 户 脚本 运 
行 时 间 过 长 ， 导 致 用 户 不 得 不 结束 这 个 操作 的 炮 熔 。 
HTMLS 中 的 Web Worker 可 以 分 为 两 种 不 同 的 线程 类 型 ; 一 种 是 专用 线程 (Dedicated 
WorkeD， 另 一 种 是 共享 线程 (Shared WorkeD。 这 两 种 类 型 的 线程 各 有 不 同 的 用 途 : 专用 线程 
只 能 为 某 一 页 面 服务 ， 不 能 为 多 个 页 面 共享 ， 而 共享 线程 正好 解决 了 这 个 问题 。 
在 后 台 线 程 中 ， 可 以 通过 共享 线程 让 多 个 页 面 共享 同一 个 后 台 线程 ， 从 而 可 以 将 后 台 线 
程 作为 提供 后 台 服务 的 场所 使 用 ， 同 时 多 个 页 面 也 可 以 通过 后 台 线 程 来 实现 数据 的 共享 。 
本 章 学 习 目 标 : 
o 掌握 Web Workers 的 基本 知识 ， 能 够 使 用 Web Workers 在 Web 网 站 或 应 用 程序 中 创 
建 一 个 后 台 线 程 

e 掌握 在 前 端 页 面 与 后 台 线 程 进行 数据 交互 时 用 到 的 方法 和 事件 ,能 够 在 JavaScript A 
本 中 实现 前 端 页 面 和 后 台 线 程 之 间 的 数据 交互 

e 掌握 在 主线 程 之 间 婴 套子 线程 的 方法 , 能够 利用 JavaScript 脚本 在 主线 程 中 创建 一 个 
或 多 个 子 线程 ， 能 够 实现 主线 程 与 子 线程 、 子 线程 与 子 线程 之 间 的 数据 传递 

e 了 解 在 后 台 线 程 中 可 以 使 用 JavaScript 脚本 中 的 对 象 、 方 法 和 事件 

。 掌握 共享 线程 的 基本 概念 ， 如 何 使 用 共享 线程 ， 如 何在 共享 线程 中 提供 服务 ， 以 及 
如 何在 共享 线程 中 实现 数据 共享 。 


9.1 认识 Web Workers 

















Web Workers 是 HTMLS5 中 新 增 的 、 用 来 在 Web 应 用 程序 中 实现 后 台 处 理 的 一 种 技术 。 
9.1.1 HTML4 处 理 长 耗 时 操作 的 问题 


在 使 用 HIML 4 与 JavaScript 创建 的 Web 应 用 程序 中 ， 因 为 所 有 的 处 理 都 是 在 单线 程 内 
执行 的 ， 所 以 如 果 耗 时 比较 长 ， 程 序 界面 就 会 处 于 长 时 间 没 有 响应 的 状态 。 最 糟糕 的 是 ， 当 
耗 时 达到 一 定 程度 时 ， 浏 览 器 会 弹出 一 个 提示 框 ， 告 知 用 户 脚本 运行 时 间 过 长 ， 或 是 浏览 
直接 卡 死 ， 不 能 进行 其 他 操作 ， 使 用 户 不 得 不 中 断 正 在 执行 的 处 理 。 

9.1.2 HTML5 针对 长 耗 时 操作 的 解决 方法 


为 了 解决 HTML4 中 长 耗 时 操作 卡 死 浏 览 器 的 问题 ，HIML5 新 增 了 一 个 Web Workers 


第 9 章 Web Workers 多 线程 处 理 。153。 


API。 使 用 这 个 API， 用户 可 以 很 容易 地 创建 在 后 台 执 行 的 线程 。 如 果 将 可 能 耗费 较 长 时 间 的 
操作 交 给 后 台 去 执行 ， 那 么 对 前 端 页 面 中 执行 的 操作 就 没有 任何 影响 了 。 
要 创建 后 台 线程 , 只 需要 在 Worker 类 的 构造 函数 中 提供 一 个 指向 JavaScript 文件 资源 的 
URL， 就 可 以 创建 Worker 对 象 了 ， 代 码 如 下 : 
var worker = new Worker("worker.js"); 
通过 这 种 方式 创建 的 线程 , 属于 专用 线程 ,给 Worker 类 的 构造 函数 提供 的 指向 JavaScript 
文件 资源 的 URL， 是 创建 专用 线程 时 Worker 构造 函数 所 需要 的 唯一 参数 。 当 Worker 构造 函 
数 被 调用 之 后 ， 一 个 工作 线程 的 实例 便 会 被 创建 出 来 。 
需要 注意 的 是 ， 在 后 台 线 程 中 是 不 能 访问 页 面 或 窗口 对 象 的 。 如 果 在 后 台 线程 的 脚本 文 
件 中 用 到 window 或 document 对 象 ， 会 引发 错误 。 
另外 ， 可 以 通过 发 送 和 接收 消息 来 与 后 台 线程 互相 传递 数据 。 通 过 获取 Worker 对 象 的 
onmessage 事件 句柄 ， 可 以 在 后 台 线 程 中 接收 消息 ， 代 码 如 下 : 
Worker.onmessage = function(event) ( 
/处 理 收 到 的 消息 





} 
使 用 Worker 对 象 的 postMessage 方法 来 向 后 台 线程 发 送 消息 ， 代 码 如 下 所 示 。 发 送 的 消 
息 是 文本 数据 , 但 也 可 以 是 任何 JavaScript 对 象 (需要 通过 JSON 对 象 的 stringfy 方法 将 其 转换 
成 文本 数据 )。 
worker.postMessage(message); 
另外 ， 同 样 可 以 通过 获取 Worker 对 象 的 onmessage 事件 句柄 ， 或 通过 Worker 对 象 的 
postMessage 方法 ， 在 后 台 线程 内 部 进行 消息 的 接收 和 发 送 。 


9.1.3 Web Workers 的 使 用 示例 


本 节 将 通过 一 个 累加 求 和 运算 的 例子 ， 演 示 HTMLA 在 执行 耗 时 操作 时 的 问题 ， 然 后 再 
使 用 Web Workers 来 实现 同样 的 功能 ， 以 向 读者 展现 Web Workers 的 优势 。 
【 例 9-1】 单线 程 方式 进行 求 和 运算 。 
<!DOCTYPE html PUBHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Worker 的 使 用 </title> 
«script type="text/javascript"> 
function calculate()( 
var num = parseInt(document.getElementBylId("num").value, 10); 
var result — 0: 
/循环 计算 求 和 
for(var i = 0:i <= num;i)( 
result += i; 
} 
alert(" 累 加 值 为 : "+result+"。"); 


</script> 
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</head> 
<body> 
<h1> 累 加 求 和 示例 </h1> 
输入 数值 ，<input type="text" id="num" /> 
<button onclick="calculate0"> 计 算 <button> 
</body> 
<html> 
运行 以 上 程序 , 在 文本 框 中 输入 数值 并 单 击 “ 计 算 ” 按 钮 后 , 在 弹出 合计 值 消息 框 之 前 ， 
户 不 能 在 该 页 面 上 进行 操作 。 另 外 ， 虽 然 用 户 在 文本 框 中 输入 比较 小 的 数值 时 不 会 有 什么 
问题 ， 但 是 当 用 户 在 文本 框 中 输入 很 大 的 数值 时 ， 浏 览 器 就 会 卡 死 。 
在 HIML5 中 ， 可 以 重 写 以 上 示例 ， 使 用 Web Workers API 让 耗 时 较 长 的 运算 在 后 台 运 
行 ， 这 样 在 文本 框 中 无 论 输 入 多 大 的 数值 都 可 以 正常 运算 。 
【 例 9-2] 使 用 Web Workers 优化 求 和 运算 。 
«IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Worker 的 使 用 </title> 
<script type="text/javascript"> 
/创建 执行 运算 的 线程 
var worker = new Worker("js/SumCalculate.js"); 
/接收 从 线程 中 传 出 来 的 计算 结果 
Worker.onmessage = function(event) ( 
/把 消息 文本 放置 在 data 属性 中 ， 可 以 是 任何 JavaScript 对 象 
alert(" 累 加 值 为 : "+ eventdata +". "y; 
































h 
function calculate()( 
var num = parseInt(document.getElementById("num").value, 10); 
/将 数值 传 给 线程 
worker.postMessage(num); 
} 
</script> 
</head> 
<body> 
<hl> 累 加 求 和 示例 <hl> 
输入 数值 : <input type="text" id-"num"/ 
<button onclick="calculate0"></button> 
</body> 
</html> 
以 上 代码 把 对 给 定 值 的 求 和 运算 的 处 理 放 到 线程 中 单独 执行 ， 并 且 把 线程 代码 单独 书写 
在 SumCalculatejs 脚本 文件 中 ， 这 个 脚本 文件 中 的 代码 如 下 : 
onmessage = function(event) ( 
var num — event.data; 
var result = 0; 
for(var i0;i<=num;iH){ 
result += i; 
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j 
/向 线程 创建 源 回 送 消息 
postMessage(result); 


} 


这 个 求 和 运算 示例 在 浏览 器 中 能 正常 运行 ,除非 累 加 结果 受 计算 机 本 身 的 数据 类 型 可 表 
示 位 数 的 限制 。 运 行 结果 如 图 9-1 所 示 。 


© (y (O 12700.1:020/ch09/index2.htm 


127.0.0.1:8020 显示 : 


Bi 


0 值 为 : 617283950560934700, 





图 9-1 求 和 运算 结果 


9.1.4 Web Workers 的 使 用 场合 


在 实际 项 目 开 发 中 ，Web Workers API 适用 于 如 下 一 些 场合 : 


拼写 检查 。 


预先 抓 取 并 缓存 一 些 数据 以 供 后 期 使 用 。 
代码 高 亮 处 理 或 其 他 一 些 页 面 上 的 文字 格式 化 处 理 。 


分 析 视 频 或 音频 数据 。 

后 台 的 输入 /输出 操作 。 

大 数据 量 分 析 和 计算 操作 。 

canvas 元 素 中 图 像 数据 的 运算 和 生成 处 理 。 
本 地 数据 库 中 数据 的 存 取 和 计算 问题 。 


9.2 使 用 Web Workers 


从 前 面 介绍 的 示例 可 知 , 使 用 Web Workers 的 步骤 十 分 简单 。 只 需要 在 Worker 类 的 构造 
函数 中 ， 将 需要 在 后 台 线 程 中 执行 的 脚本 文件 的 URL 地 址 作为 参数 ， 然 后 创建 Worker 对 象 。 
但 需要 注意 的 是 ， 在 使 用 Web Workers 前 ， 需 要 检查 浏览 器 是 否 支持 ， 以 免 用 户 的 浏览 器 版 本 
不 支持 Web Workers， 导 致 应 用 不 能 正常 运行 。 本 节 就 来 介绍 如 何 检查 浏览 器 对 Web Workers 
的 支持 情况 ， 以 及 页 面 如 何 和 线程 进行 数据 交互 。 


9.2.1 检查 浏览 器 支持 情况 
在 调用 Web Workers API 之 前 ， 应 该 确认 当前 浏览 器 是 否 支持 。 如 果 不 支持 ， 可 以 提供 








一 些 备用 信息 ， 提 醒 / 








FER 








目 最 新 版 的 浏览 器 。 例 如 ， 下 面 的 代码 可 以 用 来 测试 浏览 器 的 支 





持 情况 : 
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function testWorker() ( 
if(typeof( Worker)!— "undefined") ( 
document .getElementByld("support") innerHIMI 一 "浏览 器 不 支持 HIMLS Web Workers": 
j 


) 

在 这 段 代 码 中 ， 使 用 testWorker 函数 来 检测 浏览 器 的 支持 情况 ， 可 在 页 面 加 载 时 调用 该 
函数 。 调 用 typeof(Worken) 会 返回 全 局 window 对 象 的 Worker 属性 ， 如 果 浏 览 器 不 支持 Web 
WorkersAPI， 返 回 结果 将 是 undefined。 上 面 这 段 代 码 在 检测 了 浏览 器 支持 情况 之 后 ， 会 将 检 
测 结果 反馈 回 页 面 。 


922 与 线程 进行 数据 交互 


前 面 介绍 过 ， 后 台 线 程 不 能 直接 访问 页 面 或 窗口 对 象 ， 但 是 并 不 代表 后 台 线 程 不 能 与 页 
面 之 间 进 行 数据 交互 。 接 下 来 看 一 个 后 台 线 程 与 前 端 页 面 进行 交互 的 示例 。 
该 例 将 在 页 面 上 随机 生成 一 个 整数 数组 ， 然 后 将 该 数组 传 入 线程 ， 筛 选 出 该 数组 中 可 以 
被 5 整除 的 数字 ， 然 后 显示 在 页 面 的 表格 中 。 如 果 能 够 把 数组 显示 在 页 面 的 表格 中 ， 那 么 就 
能 够 采取 同样 的 方法 ， 把 字符 串 、 数 组 、 列 表 中 的 数据 显示 在 页 面 的 表格 或 表单 控件 中 ， 甚 
至 显示 到 统计 图 中 。 
【 例 9-3】 页 面 与 线程 进行 数据 交互 。 
首先 来 构建 页 面 显示 代码 。 页 面 的 HIML 代码 部 分 有 一 个 空白 表格 , 在 页 面 脚本 中 随机 
生成 整数 数组 ， 然 后 发 送 到 后 台 线程 ， 筛 选 出 能 够 被 5 整除 的 数字 ， 并 传 回 页 面 。 在 页 面 肢 
本 中 根据 筛选 结果 动态 创建 表格 中 的 行 和 列 ， 并 将 筛选 结果 显示 在 表格 中 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 实 现 前 台 和 后 台 的 线程 数据 交互 </tile> 
<script> 
var intArray-new Array(); /产生 随机 数组 
var intStr-""; // 将 随机 数组 用 字符 串 进行 连接 
// 生 成 200 个 随机 数 
for(var i-0:1-200:1:)( 
intArray[i]-parseInt(Math.random()*200); 
if(it-0)( 
intStri—";"; /用 分 号 作为 随机 数组 的 分 隔 符 
i 
intStr/-intAmayfi]: 























i 
/向 后 台 线 程 提交 随机 数组 
var worker-new Worker("js/test.js"); 
worker.postMessage(intStr); 
/从 线程 中 取得 计算 结果 
worker.onmessage-function(event) ( 
iflevent.data!=""){ 
var h; // 行 号 
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var l; // 列 号 
var tr; 

var td; 

var intArray-event.data.split(""): 
var table-document.getElementBylId("table"): 
for(var i-0:i-intArray lengthzi) ( 
//h-parseInt(1/15,0); 
h-parseInt(i/15); 

1-196015; 

/该 行 不 存在 

ifü—o)t 

/添加 新 行 的 判断 
tr-document.createElement("tr"); 
trid="tr"+h; 
table.appendChild(tr); 

j 

/该 行 已 经 存在 的 话 

else( 

/获取 该 行 

tr=document. getElementById("tr"+h); 
} 

// 添 加 列 
td=document.createElement("td"): 
tr.appendChild(td); 
/设置 该 列 的 数字 内 容 
td.innerHTML=intArray[h* 15+]; 
/设置 该 列 的 背景 颜色 
td.style.background="#f56848"; 
/设置 该 列 的 数字 颜色 
td.style.color="#000000":; 

/设置 宽度 

td.width-"30": 

} 

} 


tr 

</script> 
</head> 
<body> 
<h2 style="text-shadow:3px 3px 6px blue:"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 显示 实例 </h2> 
<table id-"table" border-"" cellspacing-"" cellpadding=""> 
</table> 

</body> 

</html> 











该 例 使 











onmessage-function(event) ( 


var 


data-event.data; 


var returnStr; /将 5 的 倍数 组 成 字符 串 返回 
var intArray--data.split(":"): 


了 一 个 脚本 文件 testjs， 将 后 台 线程 中 的 代码 存放 在 该 文件 


= 157。 





P， 程 序 代码 如 下 : 
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TetumStr 
for(var =0:i<intArray.length:i++){ 
if(parseInt(intArray[i]%5)—0){ 
if(retumStr!-"")( 
retumStri—":": 
} 
retumStr+=intArray[i]; 
} 
} 
postMessage(returnStr); /返回 由 5 的 倍数 拼接 成 的 字符 串 
h 
执行 以 上 程序 ， 效 果 如 图 92 所 示 。 


D 实现 前 台 和 后 台 的 线 人 六 x UN 
€ QC |© 127.0.0.1:8020/ch0: 








图 9-2 程序 运行 效果 


9.3 APRES 


在 线程 中 可 以 嵌 套 子 线程 ， 从 而 可 以 把 一 个 较 大 的 后 台 线 程 切 分 成 儿 个 子 线程 ， 在 每 个 
子 线程 中 各 自 完成 相对 独立 的 一 部 分 工作 。 


93.1 单 层 幅 套 


接 下 来 介绍 一 个 线程 单 层 嵌 套 的 示例 ， 在 该 例 中 ， 修 改 前 面 介绍 的 与 线程 进行 数据 交互 
的 那个 示例 ， 把 生成 随机 数组 的 任务 放 到 后 台 线 程 中 完成 ， 然 后 使 用 一 个 子 线程 在 随机 数组 
中 筛选 可 以 被 5 整除 的 数字 。 同 时 ， 本 例 对 于 数组 的 传递 以 及 筛选 结果 的 传递 均 采用 JSON 
对 象 进行 转换 ， 验 证 是 否 能 在 线程 之 间 传 递 JavaScript 对 象 。 
【 例 9-4】 单 层 嵌 套 的 线程 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> RER </title> 
<script type="text/javascript"> 
var worker = new Worker("js/script.js"); 
worker.postMessage(""); 
/从 线程 中 取得 计算 结果 
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Worker.onmessage = function(event) ( 


if(event.data!=""){ 
varh; /1/ 行 号 
var l; // 列 号 
var tr; 
var td; 


var intArray-event data.split(":"); 
var table-document.getElementByld("table"); 
for(var i-0:i-intArray length:i4)( 
h-parseInt(i/15); 
1-196015; 
/该 行 不 存在 
iflI—0)( 
/添加 新 行 的 判断 
tr-document.createElement("tr"); 
tr.id="tr"+h; 
table.appendChild(tr); 
} 
// 该 行 已 经 存在 的 话 
else{ 
/获取 该 行 
tr=document.getElementById("tr"+h); 
} 
/添加 列 
td-document.createElement("td"); 
tr.appendChild(td); 
/设置 该 列 的 数字 内 容 
td.innerHTML -intArray[h* 151]; 
/设置 该 列 的 背景 颜色 
td.style.background="#f56848"; 
/设置 该 列 的 数字 颜色 
td.style.color="#000000"; 
// 设 置 宽度 
td.width="30"; 
5 


x 
</script> 
</head> 

<h1> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 <hl> 

<table id="table"></table> 


</body> 
<html> 


接 下 来 介绍 该 例 的 后 台 线程 的 主线 程 代 码 部 分 ,在 该 线程 中 随机 生成 由 100 个 整数 构成 
的 数组 ， 然 后 把 数组 提交 到 子 线程 ， 在 子 线程 中 把 可 以 被 5 整除 的 数字 挑选 出 来 ， 然 后 送 回 
主线 程 ， 主 线程 再 把 挑选 结果 送 回 页 面 进行 显示 
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onmessage = function(event) ( 

var intArray = new Array(100); 

/生成 100 个 能 被 5 整除 的 数 

for(var =0;i<100;i+){ 
intAmay[i]-parseInt(Math.random()*100); 

3 

var worker = new Worker("worker2 js"); 

/把 随机 数组 提交 给 子 线 程 进行 筛选 

worker.postMessage(JSON.stringify(intArray)); 

worker.onmessage = function(event) { 
/把 筛选 结果 返回 给 页 面 
postMessage(event.data); 

ý 


) 
需要 注意 的 是 ， 该 例 向 子 线程 中 提交 消息 时 使 用 的 是 workerpostMessage 方法 ， 而 向 首 
页 提交 消息 时 使 用 的 是 postMessage 方法 。 在 该 线程 中 ， 向 子 线程 提交 消息 时 使 用 子 线程 对 
象 的 postMessage 方法 ， 而 向 该 线程 创建 源 发 送 消息 时 直接 使 用 postMessage 方法 。 
接 下 来 介绍 该 例子 线程 部 分 的 代码 。 子 线程 在 接收 到 的 随机 数组 中 筛选 能 被 5 整除 的 数 
字 ， 然 后 拼接 成 字符 串 并 返回 。 
onmessage = function(event) ( 
/还 原 整数 数组 
var intArray = JSON. parse(event.data); 
var returnStr = ""; 
for(var i-0:i-intArray.length:i---) ( 
/能 和 否 被 5 整除 
if(parseInt(intArray[i])963—0) ( 
ifretumStri-"")( 
retumStr+=";"; 


} 
/将 能 被 5 整除 的 数字 拼接 成 字符 串 
retumStr += intAray[i]: 

} 


} 
// 返 回 拼接 的 字符 串 
postMessage(retumStr): 
close): 
H 
需要 注意 的 是 , 在 子 线程 中 向 发 送 源 发 送 回 消息 后 , 如 果子 线程 不 再 使 用 , 最 好 使 用 close 
语句 关闭 子 线程 。 
9.3.2 在 多 个 子 线程 中 进行 数据 交互 
除了 页 面 和 子 线程 之 间 可 以 进行 数据 交互 之 外 ， 多 个 子 线程 之 间 也 可 以 实现 数据 交互 。 
要 实现 子 线程 之 间 的 数据 交互 ， 大 致 需要 以 下 几 个 步骤 : 
(1) 创建 发 送 数据 的 子 线程 。 
Q) 执行 子 线程 中 的 任务 ， 然 后 把 要 传递 的 数据 发 送 给 主线 程 。 
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(3) 主线 程 接收 到 子 线程 传 来 的 消息 ， 创 建 接收 数据 的 子 线程 ， 然 后 把 接收 到 的 消息 传 
递 给 接收 数据 的 子 线程 。 
(4) 执行 接收 数据 的 子 线程 中 的 代码 。 
下 面 通 过 示例 来 进行 说 明 。 
【 例 9-5】 在 多 个 子 线程 之 间 进 行 数据 交互 。 
HIE, HTML 页面 代 码 仍 使 用 之 前 示例 的 页 面 ; 然后 , 编写 主线 程 中 的 代码 , 如 下 所 示 : 
onmessage = function(event)( 
var worker; 
/创建 发 送 数据 的 子 线程 
worker = new Worker("workerl js"); 
worker.postMessage(""); 
Worker.onmessage = function(event) 
// 接 收 子 线程 中 的 数据 ， 本 例 创建 随机 数组 
Var data = event.data; 
// 创 建 接收 数据 的 子 线 程 
worker = new Worker("worker4.js"); 
/把 发 送 数据 子 线程 返回 的 消息 传递 给 接收 数据 子 线程 


worker.postMessage(data); 

Worker.onmessage = function(event) { 
/获取 接收 数据 子 线程 传 回 的 数据 
var data = event.data; 
/把 筛选 结果 发 回 页 面 
postMessage(data); 

} 


} 


} 
接 下 来 看 一 下 该 例 中 发 送 数 据 子 线程 中 的 代码 。 发 送 数据 子 线程 创建 一 个 由 100 个 随机 
整数 构成 的 数组 ， 代 码 如 下 : 
onmessage = function(event) ( 
var intArray = new Array(100); 
for(var i=0;i<100;H+){ 
intArray[i]-parseInt(Math.random()* 100); 
h 
/发 送 回 随机 数组 
postMessage(JSON.stringify(intArray)); 


close(): 


94 “线程 中 可 用 的 变量 、 函 数 与 类 


因为 Web Worker 属于 一 种 被 后 台 执行 的 线程 ， 所 以 在 后 台 线 程 中 ， 只 能 使 用 JavaScript 
脚本 文件 中 的 部 分 对 象 与 方法 ， 这 些 对 象 和 方法 如 下 : 

e self: 用 来 表示 本 线程 范围 内 的 作用 域 。 

e postMessage(message): 用 于 向 创建 线程 的 源 线程 发 送信 息 。 
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e onmessage: 获取 接收 消息 的 事件 句柄 。 

e importScripts(urls): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 脚本 文件 的 URL. 地址， 可 
以 导入 多 个 脚本 文件 。 例 如 : 
importScripts('scriptl .js','scripts/scripts2.js','scripts/script3.js); 
导入 的 脚本 文件 必须 与 使 用 线程 文件 的 页 面 在 同一 个 域 中 ， 且 在 同一 个 端口 。 

e navigator 对 象 : 与 window.navigator 对 象 类 似 ， 具 有 appName、platform、userAgent、 

appVersion 属性 。 

sessionStorage/localStorage: 可 以 在 线程 中 使 用 Web 存储 。 

XMLHttpRequest， 可 以 在 线程 中 处 理 Ajax 请 求 。 

Web Workers: 可 以 在 线程 中 嵌 套 线程 。 

setTimeout( )/setInterval( ): 可 以 在 线程 中 实现 定时 处 理 。 

close: 用 于 结束 本 线程 。 

eval( )、isNaN( )、escape( ) 等 : 可 以 使 用 所 有 JavaScript 核心 函数 。 

object: 可 以 创建 和 使 用 本 地 对 象 。 

WebSockets: 可 以 使 用 WebSockets API 来 向 服务 器 发 送 和 接收 消息 。 

FileSystem: 可 以 在 线程 中 通过 同步 FileSytem API 来 实现 受 沙 箱 保 护 的 文件 系统 中 文 

件 及 目录 的 创建 、 更 新 和 删除 操作 。 


9.5 ”共享 线程 


前 面 介绍 过 ，Worker 对 象 仅 为 一 个 页 面 专 有 ， 即 当前 页 面 创建 的 Worker 对 象 ， 不 能 为 
其 他 页 面 提供 数据 信息 。 但 在 实际 应 用 中 ， 需 要 在 多 个 页 面 间 共享 相同 的 信息 。 为 了 解决 这 
个 问题 ,HTML5 提供 了 SharedWorker 对 象 ， 用 于 在 多 个 页 面 间 共享 信息 。 


9.5.4 ”基础 知识 


SharedWorker 对 象 可 以 作为 提供 后 台 服 务 的 场所 。 共享 线程 可 以 用 两 种 方式 来 定义 : 一 种 
是 通过 指向 JavaScript 脚本 资源 的 URL 来 创建 ， 另 一 种 是 通过 显 式 的 名 称 。 当 通过 显 式 的 名 称 
来 定义 时 , 在 创建 共享 线程 的 第 一 个 页 面 中 使 用 的 URL 会 被 用 作 共 享 线程 的 JavaScript 脚本 资 
Wi URL. 通过 这 样 一 种 方式 , 允许 相同 域 中 的 多 个 应 用 程序 使 用 同一 个 提供 公共 服务 的 共享 线 
程 ， 从 而 不 需要 所 有 的 应 用 程序 都 去 与 提供 公共 服务 的 这 个 URL 保持 联系 。 

无 论 在 什么 情况 下 ， 共 享 线 程 的 作用 域 或 生效 范围 都 由 创建 它 的 域 定义 。 因此， 两 个 不 
同 的 站 点 ( 即 域 ) 即 使 使 用 相同 的 共享 线程 名 称 ， 也 不 会 发 生 冲突 。 

创建 共享 线程 可 以 通过 使 用 SharedWorker() 构 造 函数 来 实现 ， 这 个 构造 函数 使 用 URL 
作为 第 一 个 参数 ， 即 指向 JavaScript 资源 文件 的 URL。 同 时 ， 如 果 提 供 了 第 二 个 参数 ， 那 么 
这 个 参数 将 被 用 作 这 个 共享 线程 的 名 称 。 创 建 方法 如 下 : 

var worker = new SharedWorker(url,[name]); 

其 中 ，url 参数 用 于 指定 后 台 脚 本 文件 的 URL 地 址 ， 在 后 台 脚 本 文件 中 定义 了 在 后 台 线 
程 中 所 要 执行 的 处 理 操作 ; name 参数 是 可 选项 ， 用 于 指定 Worker 的 名 称 。 当 创建 多 个 
SharedWorker 对 象 时 ,脚本 文件 将 根据 创建 这 些 SharedWorker 对 象 时 使 用 的 url 参 数值 与 name 
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参数 值 来 决定 是 否 创建 不 同 的 线程 。 

以 下 是 几 种 常见 的 创建 SharedWorker 对 象 的 情形 : 
/以 下 两 个 SharedWorker 对 象 共 享 同一 个 后 台 线程 
var workerl = new SharedWorker("workerl js"); 
var worker2 = new SharedWorker("workerl js"); 
/以 下 两 个 SharedWorker 对 象 创建 两 个 不 同 的 后 台 线程 
var workerl = new SharedWorker("workerl.js"); 
var worker2 = new SharedWorker("worker2 js"); 
/以 下 两 个 SharedWorker 对 象 共享 同一 个 后 台 线程 
var workerl = new SharedWorker("workerl.js"."namel"); 
var worker2 = new SharedWorker("workerl.js" name"); 
/为 以 下 两 个 SharedWorker 对 象 创建 两 个 不 同 的 后 台 线程 
var workerl = new SharedWorker("worker1.js","name1"); 
var worker2 = new SharedWorker("workerl js" ""name2"); 


9.552 与 共享 线程 通信 


与 共享 线程 的 通信 跟 专用 线程 一 样 ， 也 是 通过 使 用 隐 式 的 MessagePort 对 象 实例 来 完成 
的 。 当 使 用 SharedWorker( ) 构 造 函 数 时 ， 这 个 对 和 象 将 通过 一 种 引用 的 方式 被 返回 。 可 以 通过 
这 个 引用 的 port 端口 属性 来 与 它 进行 通信 。 发 送 消息 与 接收 消息 的 代码 示例 如 下 : 
/从 端口 接收 数据 ， 包 括 文本 数据 以 及 结构 化 数据 
worker.port.onmessage = function (event) ( define your logic here... }; 
/向 端口 发 送 普通 文本 数据 
Worker.port.postMessage('put your message here ... "); 
/向 端口 发 送 结构 化 数据 
worker.port.postMessage({ username: "usertext': live city: ['data-one', 'data-two', 'data-three'data-four]》); 
其 中 ， 在 上 述 示例 代码 中 ， 第 一 个 示例 使 用 onmessage 事件 处 理 程序 来 接收 消息 ， 第 二 
个 示例 使 用 postMessage 来 发 送 普通 文本 数据 , 第 三 个 示例 使 用 postMessage 来 发 送 结构 化 数 
据 ， 这 里 使 用 了 JSON 数据 格式 。 


9.6 “线程 的 工作 原理 





9.6.1 ”线程 事件 处 理 模型 


当 工 作 线程 由 一 个 具有 URL 参数 的 构造 函数 创建 时 ， 它 需要 一 系列 的 处 理 流 程 来 处 理 
和 记录 它 本 身 的 数据 和 状态 。 下 面 给 出 了 工作 线程 的 处 理 模型 : 

(1) 创建 独立 的 并 行 处 理 环境 ， 并 且 在 此 环境 中 异步 执行 接 下 来 的 步骤 。 

(2) 如 果 它 的 全 局 作用 域 是 SharedWorkerGlobalScope 对 象 , 那么 把 最 合适 的 应 用 程序 组 
存 和 它 联 系 在 一 起 。 

6) 尝试 从 它 提供 的 URL 里 面 使 用 synchronous 和 force same-origin 标志 获取 脚本 资源 。 

(4) 新 脚本 在 创建 时 遵照 下 面 的 步 又 : 

© 创建 脚本 的 执行 环境 。 

Q) 使 用 脚本 的 执行 环境 解析 脚本 资源 。 
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@ 设置 脚本 的 全 局 变量 为 工作 线程 全 局 变量 。 

@ 设置 脚本 编码 为 UTF-8 编码 。 

(5) 启动 线程 监视 器 ， 关 闭 孤 立 线程 。 

(6) 对 于 挂 起 的 线程 ， 启 动 线程 监视 器 ， 监 视 挂 起 线程 的 状态 ， 及 时 在 并 行 环境 中 更 改 
它们 的 状态 。 

(7) 跳 入 脚本 初始 点 ， 并 且 启 动 运行 。 

(8) 如 果 全 局 变量 为 DedicatedWorkerGlobalScope 对 象 , 那么 在 线程 的 隐 式 端口 中 启用 端 
口 消息 队列 。 

(9) 对 于 事件 循环 ， 等 待 直 到 事件 循环 列表 中 出 现 新 的 任务 。 

(10) 首先 运行 事件 循环 列表 中 最 先进 入 的 任务 ， 但 是 用 户 代 理 可 以 选择 运行 任何 一 个 
任务 。 

(11) 如 果 事 件 循环 列表 拥有 mutex 互 斥 信号 量 ， 那 么 释放 它 。 

(12) 运行 完 一 个 任务 后 ， 从 事件 循环 列表 中 删除 它 。 

(13) 如 果 事 件 循环 列表 中 还 有 任务 ， 那 么 继续 前 面 的 步骤 以 执行 这 些 任务 。 

(14) 如 果 活 动 超时 ， 清 空 工作 线程 的 全 局 作用 域 列表 。 

(15) 释放 工作 线程 的 端口 列表 中 的 所 有 端口 。 


9.6.2 ”线程 的 应 用 范围 和 作用 域 


线程 的 全 局 作用 域 仅 限于 工作 线程 本 身 ， 即 在 线程 的 生命 周期 内 有 效 。 
WorkerGlobalScope 接口 代表 它 的 全 局 作用 域 ， 下 面 来 看 下 这 个 接口 (WorkerGlobalScope 抽象 
接口 ) 的 具体 细节 : 
interface WorkerGlobalScope { 
readonly attribute WorkerGlobalScope self; 
readonly attribute WorkerLocation location: 
void close(); 
attribute Function onerror; 
e implements WorkerUtils; 
WorkerGlobalScope implements EventTarget: 
可 以 使 用 WorkerGlobalScope 的 self 属性 来 实现 对 这 个 对 象 本 身 的 引用 。location 属性 返 
回 线程 被 创建 出 来 时 与 之 关联 的 WorkerLocation 对 象 ， 表 示 用 于 初始 化 这 个 工作 线程 的 脚步 
资源 的 绝对 URL， 即 使 在 页 面 被 多 次 重 定向 之 后 ， 这 个 URL 资源 位 置 也 不 会 改变 。 
在 脚本 调用 WorkerGlobalScope 的 close( ) 方 法 后 ， 会 自动 执行 下 面 的 两 个 步骤 ， 
(1) 删除 这 个 工作 线程 事件 队列 中 的 所 有 任务 。 
(2) 设置 WorkerGlobalScope 对 象 的 closing 状态 为 tue( 这 将 阻止 以 后 任何 新 的 任务 继续 
被 添加 到 事件 队列 中 )。 


9.6.3 ”线程 的 生命 周期 


线程 之 间 的 通信 必须 依赖 浏览 器 的 上 下 文 环境 ， 并 且 通 过 它们 的 MessagePort 对 象 实例 
传递 消息 。 每 个 工作 线程 的 全 局 作用 域 都 拥有 这 些 线程 的 端口 列表 ， 这 些 列表 包括 所 有 线程 
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要 用 到 的 MessagePort 对 象 。 在 专用 线程 的 情况 下 ， 这 个 列表 还 会 包含 隐 式 的 MessagePort 
对 象 。 
每 个 工作 线程 的 全 局 作用 域 对 象 WorkerGlobalScope 还 会 有 一 个 工作 线程 的 线程 列表 ， 
在 初始 化 时 这 个 列表 为 空 。 当 工作 线程 被 创建 或 者 拥有 父 工作 线程 时 , 它们 就 会 被 填充 进来 。 
最 后 ， 每 个 工作 线程 的 全 局 作用 域 对 象 WorkerGlobalScope 还 拥有 这 个 线程 的 文档 对 象 
列表 , 在 初始 化 时 这 个 文档 对 象 列表 为 空 。 当 工作 线程 被 创建 时 , 文档 对 象 就 会 被 填充 进来 。 
无 论 何 时 ， 当 一 个 文档 对 象 被 丢弃 时 ， 就 要 从 这 个 文档 对 象 列表 中 将 之 删除 。 
在 工作 线程 的 生命 周期 中 ， 定 义 了 下 面 四 种 不 同类 型 的 线程 名 称 ， 用 以 标识 它们 在 线程 
的 整个 生命 周期 中 的 不 同 状态 : 
e. 当 一 个 工作 线程 的 文档 对 象 列表 不 为 空 时 ， 这 个 工作 线程 被 称 为 许可 线程 。 
e 当 一 个 工作 线程 是 许可 线程 并 且 拥 有 数据 库 事 务 ， 或 者 拥有 网 络 连接 ， 或 者 其 工作 
线程 列表 不 为 空 时 ， 这 个 工作 线程 被 称 为 受 保护 的 线程 。 
e. 当 一 个 工作 线程 的 文档 对 象 列 表 中 的 任何 一 个 对 象 都 处 于 完全 活动 状态 时 ， 这 个 工 
作 线 程 被 称 为 需要 激活 的 线程 。 
e 当 一 个 工作 线程 既是 非 需要 激活 的 线程 ， 同 时 又 是 许可 线程 时 ， 这 个 工作 线程 被 称 
为 挂 起 线程 。 











9.7 综合 实战 


9.7.1 使 用 线程 做 后 台数 值 计 算 


工作 线程 最 简单 的 应 用 就 是 用 来 做 后 台数 值 计 算 ， 而 这 种 计算 并 不 会 中 断 前 台 用 户 的 操 
作 。 下 面 我 们 提供 了 一 个 线程 的 代码 片段 ， 用 来 执行 一 项 相对 来 说 比较 复杂 的 任务 : 计算 两 
个 非常 大 的 数字 的 最 小 公 倍 数 和 最 大 公约 数 。 

在 这 个 例子 中 ， 我 们 在 主 程序 页 面 中 创建 一 个 后 台 工 作 线程 ， 并 且 向 这 个 后 台 工 作 线程 
分 配 任务 ( 即 传递 两 个 特别 大 的 数字 )。 当 工作 线程 执行 完 这 个 任务 时 ， 便 向 主 程序 页 面 返回 
计算 结果 。 而 在 这 个 过 程 中 ， 主 程序 页 面 不 需要 等 待 这 个 耗 时 的 操作 ， 可 以 继续 进行 其 他 的 
行为 或 任务 。 

【 例 9-6】 使 用 线程 做 后 台数 值 计算 。 

本 例 把 这 个 应 用 场景 分 为 两 个 主要 部 分 : 一 个 是 主 程序 页 面 ， 可 以 包含 主 JavaScript 应 
用 入 口 、 用 户 其 他 操作 UI 等 ， 另 一 个 是 后 台 工 作 线 程 脚本 ， 用 来 执行 计算 任务 。 

主 程序 页 面 的 代码 如 下 : 
<!DOCTYPE HIMI> 
<html> 
<head> 
<tile> 后 台数 值 计算 </title> 
</head> 


<body> 
<div> 最 小 公 倍 数 和 最 大 公约 数 : 
<p id="computation_results"> 请 稍 后 ,正在 计算 … </p> 
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</div> 
<script> 
var worker = new Worker('js/numberworker js"): 
worker.postMessage(" (first:347734080,second:3423744400] "); 
worker.onmessage = function (event) 
{ 
document getElementById(computation result).textContent = event.data; 
</script> 
</body> 
<html> 


后 台 线 程 numberworkerjs 的 代码 如 下 : 
Pr 这 个 线程 主要 用 来 求 最 小 公 倍数 和 最 大 公约 数 */ 
onmessage = function (event) 


{ 


Var first-event.data.first; 


var second-event.data.second: 
calculate(first, second); 


h 
Pt 计算 最 小 公 倍数 和 最 大 公约 数 */ 

function calculate(first.second) { 
var common divisor-divisor(first,second); 
var common multiple-multiple(first.second): 

postMessage(" Work done! "十 

"The least common multiple is "+common divisor 

+" and the greatest common divisor is "common multiple); 


} 


Pr 求 最 大 公约 数 并 
function divisor(a, b) ( 
if(a?6b — 0) ( 
return b; 


Jelset 


retum divisor(b, a % b); 


} 
j 


Pr 求 最 小 公 倍 数 驮 
function multipla, b) { 
var multiple = 0; 
multiple = a * b / divisor(a, b); 
return multiple: 





本 身 的 线程 对 象 。 








接 下 来 使 





这 个 线程 对 象 与 后 台 脚本 进行 通信 。 该 线程 对 象 有 两 个 主要 寻 








} 
在 主 程序 页 面 中 ,使 用 Worker ) 构 造 函 数 创建 一 个 新 的 工作 线程 ， 它 返回 一 个 代表 线程 





HB 


件 处 理 程序 : postMessage 和 onmessage . postMessage 用 来 向 后 台 脚 本 发 送 消息 ，onmessage 











来 接收 从 后 台 











车 本 传递 过 来 的 消息 。 


在 后 台 工 作 线程 的 代码 片段 中 ， 定 义 了 两 个 函数 : 一 个 是 divisor( )， 用 以 计算 最 大 公约 


589 3: Web Workers 多 线程 处 理 *167* 


数 ， 另 一 个 是 multiple( )， 用 以 计算 最 小 公 人 倍数。 同时， 工作 线程 的 onmessage 事件 处 理 程序 
以 接收 从 主 程序 页 面 传递 过 来 的 数值 , 然后 把 这 两 个 数值 传递 给 calculate( ) 函 数 用 以 计算 。 
计算 完成 后 ， 调 用 事件 处 理 程序 postMessage， 把 计算 结果 发 送 到 主 程序 页 面 。 


97.2 ”使 用 共享 线程 处 理 多 用 户 并 发 连接 


于 线程 的 构建 及 销毁 都 要 消耗 很 多 系统 性 能 ， 例 如 CPU 处 理 器 的 调度 、 内 存 的 占 上 
及 回收 等 ， 因 此 在 一 般 的 编程 语言 中 都 会 有 线程 池 的 概念 。 线 程 池 是 一 种 对 多 线程 进行 并 发 
处 理 的 形式 ， 在 处 理 过 程 中 ， 系 统 将 所 有 任务 添加 到 一 个 任务 队列 中 ， 然 后 在 构建 好 线程 
之 后 自动 启动 这 些 任务 。 处 理 完 任 务 后 ， 再 把 线程 回收 到 线程 池 中 ， 用 于 下 一 次 任务 调用 。 
线程 池 也 是 共享 线程 的 一 种 应 用 。 
HTMLS 也 引入 了 共享 线程 技术 ,但 是 由 于 每 个 共享 线程 可 以 有 多 个 连接 ,HTMLS 为 共 
享 线程 提供 了 和 普通 工作 线程 稍微 有 些 区 别 的 API 接口 。 下 面 通过 例子 来 讲述 共享 线程 的 
用 法 。 
【 例 9-7] 创建 一 个 共享 线程 ， 用 于 接收 从 不 同 连接 发 送 过 来 的 指令 ， 然 后 实现 指令 
处 理 逻 辑 ， 指 令 处 理 完毕 后 ， 将 结果 返回 给 各 个 不 同 的 连接 用 户 。 
首先 ， 页 面 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
«title» E HTMLS 中 使 用 共享 线程 </title> 
«script type="text/javascript"> 
var worker = new SharedWorker(js/sharedworkerjs); 
var log = document.getElementById(response from worker"); 
worker.port.addEventListener('message', function(e) { 
log.textContent —e.data; 
J, false); 
worker.port.start(); 
worker.port.postMessage( Ki Wr Fl" J*-].."); 
/发 送 用 户 数据 到 共享 线程 
function postMessageToSharedWorker(input) 
d 
/定义 一 个 JSON 对 象 来 初始 化 请 求 
var instructions (instruction:input.value] ; 
worker.port.postMessage(instructions); 
} 
</script> 
</head> 
<body onload="> 
«output id-'response from worker> 共 享 线程 示例 </output> 
发 送 指令 到 共享 线程 : 
<input type="text" autofocus oninput="postMessageToSharedWorker(this);retum false:"></input> 
</body> 
</html> 
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用 于 处 理 用 户 指令 的 共享 线程 sharedworkerjs 的 代码 如 下 : 
/* 创建 一 个 共享 线程 ， 用 于 接收 从 不 同 连接 发 送 过 来 的 指令 ， 指 令 处 理 完毕 后 ， 将 结果 返回 到 各 











个 不 同 的 连接 用 户 。*/ 

p" 

* 统计 连接 数 ， 这 个 变量 可 被 所 有 共享 线程 访问 

*/ 

var connect number = 0; 

onconnect = function(e) { 
connect number —connect number* 1; 
/取得 第 一 个 端口 
var port = e.ports[0]; 


port.postMessage( 一 个 新 的 连接 ! 当前 连接 了 D 是 '+ connect number); 


port.onmessage = function(e) { 
/获取 请 求 过 来 的 指令 
var instruction=e.data.instruction; 
varresults-execute instruction(instruction); 


port.postMessage('Request: instruction?" Response "results + from shared worker...'); 


} 
h 
/* 
* 该 方法 用 来 执行 请 求 过 来 的 指令 
* (Q)param instruction 
* (Qretum 
pd 
function execute_instruction(instruction) 
{ 
var result value; 
/实现 逻辑 代码 
/执行 指令 
return result value; 
} 
在 上 面 的 共享 线程 例子 中 ， 在 主 程序 页 面 ( 即 各 个 月 
程 对 象 , 然后 定义 一 个 方法 postMessageToSharedWorker， 


日 户 连 接 的 页 面 ) 上 构造 出 一 个 共享 线 
向 共享 线程 发 送 从 用 户 那 里 得 到 的 指 


令 。 同 时 ， 在 共享 线程 的 实现 代码 片段 中 定义 connect_number， 用 来 记录 连接 到 这 个 共享 线程 
的 总 数 。 之 后 ， 用 onconnect 事件 处 理 程序 接受 来 自 不 同 用 户 的 连接 ， 解 析 它 们 传递 过 来 的 指 





令 。 最 后 ， 定 义 一 个 方法 execute instruction， 用 于 执行 上 





户 的 指令 ， 指 令 执 行 完毕 后 ， 将 结果 














返回 给 各 个 用 户 。 








这 里 并 没有 像 前 面 的 例子 一 样 用 到 工作 线程 的 onmessage 事件 处 理 程序 ， 而 是 使 用 了 另 





一 种 方式 addEventListener。 实 际 上 ， 这 两 种 方式 的 实现 


原理 基本 一 致 ， 只 是 稍 有 差别 。 如 果 


使 用 addEventListener 来 接受 来 自 共享 线程 的 消息 ,那么 就 要 使 用 worker port.start( ) 方 法 来 启 
动 这 个 端口 。 之 后 就 可 以 像 工 作 线程 那样 正常 地 接收 和 发 送 消息 。 





97.3 HTML5 线程 代理 


随 着 多 核 处 理 器 的 流行 , 现代 计算 机 一 般 都 拥有 多 核 CPU， 这 也 使 得 任务 能 够 在 处 理 器 
级 别 并 发 执行 。 如 果 要 在 一 个 具有 多 核 CPU 的 客户 端 用 单线 程 执行 程序 ， 即 处 理 业务 逻辑 ， 
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往往 不 能 最 大 化 地 利用 系统 资源 。 因 此 ， 在 这 种 情况 下 ， 我 们 可 以 将 一 个 耗 时 较 长 或 复杂 的 
任务 拆 分 成 多 个 子 任务 ， 把 每 一 个 子 任务 分 担 给 一 个 工作 线程 ， 从 而 让 多 个 工作 线程 共同 承 
担 单个 线程 的 工作 负载 ， 同 时 又 能 够 并 发 地 执行 ， 最 大 化 地 利用 系统 资源 (CPU、 内 存 、IO 


^). 
[519-8] 计算 全 球 人 口 的 数量 。 
首先 ， 设 计 主 程序 页 面 的 代码 ， 如 下 : 





























<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
«title» /E HTMLS 中 使 用 代理 线程 </title> 
<script> 

var worker = new SharedWorker('s/delegationworker.js"): 

var log = document.getElementById(response from worker"); 

worker.onmessage = function (event) { 

/统计 来 自 代 理 线程 的 人 口 

var resultdata — event.data; 

var population = resultdata.total population; 

var showtext = 'The total population of the word is "population; 
document.getElementById(response from worker).textContent = showtext; 
E 
</script> 
</head> 
<body onload="> 

«output id-'response from_worker> 共 享 线程 示例 : 如 何在 HTMLS 中 使 用 代理 线程 </output> 

</body> 
</html> 


让 工作 线程 delegationworkerjs 的 代码 如 下 : 


P * 
* 定义 国家 列表 
*/ 
var country list = ['Albania''Algeria''American''Andorra''Angola''Antigua','....']; 
/ 定义 用 于 记录 人 口 的 变量 
vartotal population = 0: 
var country size = country list.length; 
var processing size = country list.length: 
for (var i = 0;i< country size; H+) 
{ 
var worker = new Worker('js/subworker s"): 
/发 送 至 代理 线程 
var command- (command''start' country:country. list[i]) : 
wWorker.postMessage(command); 
worker.onmessage = update results; 


/* 
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* 用 于 更 新 结果 的 方法 
* @param event 
* @retum 
sj 
function storeResult(event) 
{ 
total_population += event.data; 
processing size = 1; 
if (processing size <= 0) 
í 


/完成 计算 ， 提 交 结果 至 主页 面 并 显示 


postMessage(total population); 


y 
} 


代理 线程 subworkerjs 的 代码 如 下 : 
/为 代理 线程 定义 onmessage 事件 句柄 


onmessage = start calculate; 


ha * 
function start calculate(event) 
{ 


var command-event.data.command; 


if(command!-null&&command-'start") 


( 
var coutry-event.data.country; 
do calculate(country); 
} 
onmessage = null; 


} 


/* 返回 国家 人 口 */ 
function do calculate(country) 
{ 
var population = 0; 
var cities — 
for (var i = 0; i < cities.length: i) 
{ 
var city_popu=0; 
population += city popu; 
} 
postMessage(population); 
close(); 
} 


/获取 一 个 国家 的 所 有 城市 


综 上 可 知 , HTMLS Web Worker 的 多 线程 特性 为 Web 应 用 开发 人 员 提 供 了 强大 的 并 发 程 
序 设计 功能 ， 允 许 开 发 人 员 设 计 开 发 出 性 能 和 交互 性 更 好 的 富 客户 端 应 用 程序 。 本 章 不 仅仅 


详细 讲述 HIML5 中 的 多 线程 规范 ， 同 四 




















HIMLS 中 的 多 线程 编程 及 其 应 用 ， 为 上 














也 以 几 种 典型 的 应 用 场景 为 例 ， 以 实例 的 形式 讲解 
户 提供 详细 而 全 面 的 参考 ， 并 且 指 导 开 发 人 员 设 计 
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和 构建 更 为 高 效 和 稳定 的 Web 多 线程 应 用 。 
98 ”本章 小 结 


本 章 介绍 HTMLS 中 新 增 的 与 线程 相关 的 Web Workers 技术 , 用 来 实现 Web 平台 上 的 多 
线程 处 理 功能 。 通 过 Web Workers， 可 以 创建 一 个 不 会 影响 前 端 处 理 的 后 台 线程 ， 并 且 可 以 
在 这 个 后 台 线 程 中 创建 多 个 子 线程 。 通 过 Web Workers， 可 以 将 耗 时 较 长 的 处 理 交 给 后 台 线 
程 去 处 理 。 

Web Worker 可 以 分 为 两 种 不 同 的 线程 类 型 : 一 种 是 专用 线程 (Dedicated WorkeD， 另 一 种 
是 共享 线程 (Shared WorkeD。 这 两 种 类 型 的 线程 各 有 不 同 的 用 途 : 专用 线程 只 能 为 某 一 页 面 
服务 ， 不 能 为 多 个 页 面 共享 ， 而 共享 线程 正好 解决 了 这 个 问题 。 

在 后 台 线程 中 ， 可 以 通过 共享 线程 让 多 个 页 面 共享 同一 个 后 台 线 程 ， 从 而 可 以 将 后 台 线 
程 作为 提供 后 台 服 务 的 场所 使 用 ， 同 时 多 个 页 面 也 可 以 通过 后 台 线程 来 实现 数据 的 共享 。 

本 章 在 介绍 多 线程 的 过 程 中 ， 主 要 详细 讲解 了 多 线程 处 理 技术 产生 的 原因 ， 如 何 检查 浏 
览 器 对 多 线程 的 支持 ， 单 个 线程 的 创建 ， 霸 套 线程 的 创建 ， 共 亭 线 程 的 使 用 ， 线 程 的 工作 原 
理 等 ， 最 后 讲解 了 几 个 示例 ， 教 会 大 家 怎么 使 用 学 到 的 多 线程 技术 解决 实际 问题 。 


99 思考 和 练习 


HTMLS 中 Web Workers 功能 的 概念 及 使 用 场合 。 

. 利用 Web Workers 技术 ， 实 现 一 个 累加 求 和 运算 示例 。 

. 页 面 和 线程 如 何 进行 交互 ? 

. 如 果 存 在 多 个 子 线程 ， 子 线程 之 间 如 何 进 行 数据 交互 ? 

. 共享 线程 和 专 有 线程 有 何 区 别 ? 

. 简 述 线程 的 工作 原理 。 

. 创建 一 个 共享 线程 ， 用 于 接收 从 不 同 连 接 发 送 过 来 的 指令 ， 处 理 指令 ， 然 后 将 结果 返 
回 到 各 个 不 同 的 连接 用 户 。 





MO ROT 一 
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HTMLS 新 增 了 Geolocation API( 地 理 位 置 应 用 编程 接口 ), 这 组 API 提供 了 一 种 可 以 准确 
感知 浏览 器 用 户 当前 位 置 的 方法 。 如 果 浏 览 器 支持 ， 且 设备 具有 定位 功能 ， 就 能 够 直接 使 
这 组 API 来 获取 当前 位 置信 息 。Geolocation API 可 以 应 用 于 移动 设备 上 的 地 理 位 置 应 用 。 
Geolocation API 允许 用 户 在 Web 应 用 程序 中 共享 位 置信 息 , 使 得 用 户 能 够 享受 位 置 感 久 
服务 。 本 章 将 介绍 位 置信 息 的 来 源 : 纬度 、 经 度 和 其 他 属性 ， 以 及 获取 这 些 数 据 的 途径 ， 妇 
GPS, Wi-Fi 和 蜂窝 站 点 等 。 然后， 讨论 HTML5 地 理 定位 数据 的 隐私 问题 ， 以 及 浏览 器 如 人 
使 用 这 些 数据 。 最 后 ， 深 入 探讨 Geolocation API 在 实际 中 的 应 用 。 有 目前 有 两 种 类 型 的 定位 请 
求 : 单 次 定位 请 求 和 重复 位 置 更 新 请 求 。 本 章 将 对 这 两 种 请 求 方式 进行 介绍 ， 并 演示 如 何 构 
建 实用 的 Geolocation 应 用 程序 。 
本 章 学 习 目 标 : 
o 了 解 位 置信 息 的 表示 方式 
e 熟悉 位 置信 息 的 来 源 ， 包 括 IP 定位 、GPS 定位 、Wi-Fi 定位 、 手 机 定位 以 及 自 定义 
定位 这 5 种 来 源 

e 掌握 Geolocation API 的 使 用 方法 ， 包 括 检测 浏览 器 支持 情况 、 获 取 当 前 地 理 位 置 、 
持续 监视 位 置信 息 变 化 、 停 止 获取 位 置信 息 、 隐 私 保护 、 处 理 位 置信 息 和 position 对 
象 的 使 用 等 。 

e ”学 会 使 用 Geolocation API 开发 实用 应 用 程序 。 


10.1 Geolocation API 的 基本 知识 
























































HTMLS Geolocation API 的 使 用 方法 比较 简单 ， 请 求 位 置信 息 ， 如 果 用 户 同 意 ， 浏 览 器 
就 会 返回 位 置信 息 。 位 置信 息 是 通过 支持 HTMLS 地 理 定 位 功能 的 底层 设备 (例如 笔记 本 电脑 
或 手机 ) 提 供给 浏览 器 的 。 位 置信 息 由 纬度 、 经 度 坐 标 和 其 他 元 数据 组 成 。 有 了 这 些 位 置信 息 ， 
就 可 以 创建 位 置 感知 类 应 用 程序 。 本 节 主 要 介绍 位 置信 息 的 表示 方式 及 来 源 。 


10.1.1 位 置信 息 的 表示 方式 


位 置信 息 主 要 由 纬度 和 经 度 坐 标 组 成 ， 例 如 : 
Latitude: 40.12444, Longitude: -120.11223 
在 这 里 ，Latitude 表示 纬度 ，Longitude 表示 经 度 。 经 纬度 坐标 可 以 用 下 面 两 种 方式 表示 : 
e 十 进 制 格 式 ， 如 40. 12444. 
e DMS 角度 格式 ， 如 40” 20' . 
Geolocation API 返回 的 坐标 格式 为 十 进 制 格式 。 
除了 纬度 和 经 度 坐标 ，Geolocation API 还 提供 位 置 坐标 的 准确 度 ， 并 提供 其 他 元 数据 ， 
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具体 情况 取决 于 浏览 器 所 运行 的 硬件 设备 ， 这 些 元 数据 包括 海拔 、 海 拔 准确 度 、 行 驶 方向 和 
速度 等 。 如 果 这 些 元 数据 不 存在 ， 则 返回 null. 


10.1.2 ”位 置信 息 的 来 源 


Geolocation API 不 指定 设备 使 用 哪 种 底层 技术 来 定位 应 用 程序 的 用 户 。 相 反 , Geolocation 
API 只 是 用 于 检索 信息 的 API， 而 且 通 过 这 组 API 检索 到 的 数据 只 具有 某 种 程度 的 准确 性 ， 
并 不 能 保证 设备 返回 的 实际 位 置 是 精确 的 。 设 备 可 以 使 用 的 数据 包括 : IP 地 址 、 三 维 坐标 
(GPS 全 球 定位 系统 ， 从 RFID、 蓝 牙 到 Wi-Fi 的 MAC 地 址 ，GSM 或 CDMA 手机 的 ID)。 

1. IP 定位 

在 Geolocation APIZ jj, AE IP 地 址 的 地 理 定位 方法 是 获得 位 置信 息 的 唯一 方式 ， 但 
返回 的 位 置信 息 通常 不 准确 。 基 于 IP 地 址 的 地 理 定位 的 实现 原理 是 ， 自 动 查找 用 户 的 他 地 
址 ， 然 后 检索 其 注册 的 物理 地 址 。 因 此 ， 如 果 IP 地 址 是 由 ISP 提供 的 ， 其 位 置 往往 就 由 服务 
供应 商 的 物理 地 址 决定 ， 该 地 址 可 能 距离 用 户 数 千 米 。 

IP 定位 的 优点 是 : 任何 地 方 都 可 用 ; 在 服务 器 端 处 理 。 缺 点 是 : 不 精确 ， 一 般 精 确 到 城 
市 级 ;运算 代价 大 ， 并 经 常 出 错 。 

许多 网 站 会 根据 IP 地 址 得 到 的 位 置信 息 来 做 广告 ， 所 以 在 实际 中 可 能 会 遇 到 这 样 的 情 
Di: 你 到 其 他 国家 旅行 ， 在 访问 非 本 地 网 站 时 突然 看 到 本 地 广告 ， 这 就 基于 访问 网 站 所 在 国 
家 或 地 区 的 中 地 址 。 

2. GPS 定位 

GPS 定位 是 通过 收集 运行 在 地 球 周 围 的 多 个 GPS 卫星 的 信号 实现 的 ， 但 GPS 定位 时 间 
可 能 比较 长 ， 因 此 不 适合 应 用 于 需要 快速 响应 的 应 用 程序 。 因 为 获取 GPS 定位 数据 需要 的 时 
间 比 较 长 ， 所 以 开发 人 员 需 要 异步 查询 用 户 的 位 置 。 可 以 添加 一 个 状态 栏 来 显示 正在 重新 获 
取 应 用 程序 用 户 的 位 置 。 















































GPS 定位 的 优点 是 ;比较 精确 。 缺 点 是 : 定位 时 间 长 ， 耗 电量 大 ， 室 内 效果 不 好 ， 需 要 
硬件 设备 支持 。 
3. Wi-Fi 定位 


基于 Wi-Fi 的 地 理 定位 信息 是 通过 三 角 距离 计算 得 出 的 ， 这 个 三 角 距 离 指 的 是 用 户 当前 
位 置 到 已 知 的 多 个 Wi-Fi 接 入 点 的 距离 。 不 同 于 GPS，Wi-Fi 定位 在 室内 也 非常 准确 。 

Wi-Fi 定位 的 优点 是 : 精确， 在 室内 使 用 方便 ， 可 以 简单 、 快 捷 地 定位 。 缺 点 是 ， 适合 
大 城市 ， 在 乡村 等 无 接 入 点 或 接 入 点 较 少 的 地 区 效果 不 好 。 

4. 手机 定位 

基于 手机 的 地 理 定位 信息 是 通过 计算 用 户 到 一 些 基站 的 三 角 距 离 确定 的 。 这 种 方法 可 提 
供 相当 准确 的 位 置信 息 。 这 种 方法 通常 将 基于 Wi-Fi 和 基于 GPS 的 地 理 定位 信息 结合 使 用 。 

手机 定位 的 优点 是 : 很 准确 ， 可 以 在 室内 使 用 ， 可 以 简单 、 快 捷 地 定位 。 缺 点 是 : 在 基 
站 较 少 的 偏远 地 区 效果 不 好 。 

5. 自 定义 定位 

除了 通过 编程 计算 出 用 户 的 位 置 外 ， 也 可 以 允许 用 户 自 定义 位 置 。 应 用 程序 可 能 允许 上 
户 输入 地 址 、 邮 政 编码 和 其 他 详细 信息 。 应 用 程序 可 以 利用 这 些 信息 来 提供 位 置 感知 服务 。 
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自 定义 定位 的 优点 是 : 可 以 获得 比 程序 定位 服务 更 为 准确 的 位 置 数 据 ， 允 许 将 地 理 定位 
服务 的 结果 作为 备用 的 位 置信 息 ， 用 户 自行 输入 可 能 比 自动 检测 快 。 缺 点 是 :可 能 不 准确 ， 
特别 是 当 用 户 的 位 置 发 生变 化 时 。 




















10.2 ”使 用 Geolocation API 


本 节 详 细 介 绍 Geolocation API 的 使 用 。 在 HTMLS 中 ， 为 window.navigator 对 象 新 增 了 
一 个 geolocation 属性 ， 可 以 使 用 Geolocation API 对 该 属性 进行 访问 。window.navigator 对 象 
的 geolocation 属性 存在 3 个 方法 ， 利 用 这 些 方法 可 以 实现 对 位 置信 息 的 读 取 。 


10.2.1 检测 浏览 器 支持 情况 


由 于 浏览 器 的 支持 情况 不 同 ， 在 使 用 之 前 最 好 检查 浏览 器 是 否 支 持 Geolocation API， 以 
确保 浏览 器 支持 其 所 要 完成 的 所 有 工作 。 这 样 当 浏览 器 不 支持 时 ,就 可 以 提供 一 些 替代 文本 ， 
以 提示 用 户 升 级 浏览 器 或 者 安装 插件 来 增强 现 有 浏览 器 的 功能 。 

检测 代码 如 下 : 

function loadDemo() { 
if (navigator.geolocation) ( 
document.getElementById( "support" )innerHTML = "支持 HIMLS Geolocation"; 
} else { 
document.getElementById(“ support” ). innerHTML = "当前 浏览 器 不 支持 HTMLS Geolocation"; 





j 
j 
在 上 述 代 码 中 , loadDemo( ) 函 数 测试 浏览 器 对 Geolocation API 的 支持 情况 ， 这 个 函数 是 
在 页 面 加 载 时 被 调用 的 。 如 果 存 在 地 理 定位 对 象 ，navigator geolocation 调用 将 返回 该 对 象 ， 
否则 将 触发 错误 。 在 页 面 上 预先 定义 了 support 元 素 , 它 会 根据 检测 结果 显示 支持 情况 的 提示 
信息 。 


10.22 ”获取 当前 地 理 位 置 


使 用 getCurrentPosition 方法 可 以 取得 用 户 当 前 的 地 理 位 置信 息 , 该 方法 的 使 用 格式 如 下 : 

void getCurrentPositon(onSuccess[, onError][, options]): 

其 中 ， 第 一 个 参数 为 获取 当前 地 理 位 置信 息 成 功 时 执行 的 回调 函数 ， 第 二 个 参数 为 获取 
当前 地 理 位 置信 息 失 败 时 执行 的 回调 函数 ， 第 三 个 参数 是 一 些 可 选 属性 的 列表 。 第 二 和 第 三 
个 参数 为 可 选 参数 。 

getCurrentPosition 方法 的 调用 格式 如 下 : 

navigator.geolocation.getCurrentPosition(function(position) ( 
/获取 成 功 时 的 处 理 代码 








在 获取 地 理 位 置信 息 成 功 时 执行 的 回调 函数 中 , 用 到 了 参数 position, 它 代表 一 个 positon 
对 象 ， 该 对 象 将 在 后 面 章 节 中 进行 介绍 。 

getCurrentPosition 方法 的 第 二 个 参数 为 获取 当前 地 理 位 置信 息 失败 时 执行 的 回调 函数 。 
如 果 获 取 地 理 位 置信 息 失 败 ， 可 以 通过 该 回调 函数 把 错误 信息 提示 给 用 户 。 当 在 浏览 器 中 打 
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开 使 用 Geolocation API 来 获得 用 户 当前 位 置信 息 的 页 面 时 ， 浏 览 器 会 询问 用 户 是 否 共享 位 置 
信息 。 如 果 拒 绝 共 享 的 话 ， 也 会 发 生 错误 。 
该 回调 函数 使 用 一 个 error 对 象 作 为 参数 ，error 对 象 具有 以 下 两 个 属性 : 
e code 属性 : 该 属性 有 1、2、3 这 三 个 可 选 值 。 其 中 ，1 表示 用 户 拒绝 位 置 服务 ，2 表 
示 获 取 不 到 位 置信 息 ，3 表示 获取 信息 超时 。 
e message 属性 : 该 属性 的 值 是 一 个 字符 串 ， 在 该 字符 串 中 包含 错误 信息 ， 错 误 信 息 在 
开发 和 调试 时 将 很 有 用 ， 因 为 有 些 浏览 器 不 支持 message 属性 。 
在 getCurrentPositon 方法 中 使 用 第 二 个 参数 捕获 错误 信息 的 方法 如 下 : 
navigator.geolocation.getCurrentPosition( 
function(position) { 
var cords = position.coords; 
showMap(coords.latitude.coords.longitude,coords.accuracy ): 


























^ 
// 捕 获 的 错误 信息 
function(eron){ 
var errorTypes = ( 
1: 位 置 服务 被 拒绝 
2: 获 取 不 到 位 置信 息 
3: 获 取信 息 超时 
dete eant ique t 
) 
x 
getCurrentPosition 方法 的 第 三 个 参数 可 以 省 略 ， 它 是 一 些 可 选 属性 的 列表 ， 这 些 可 选 属 
性 说 明 如 下 : 

e enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 ， 这 个 属性 在 很 多 设备 上 被 设 
置 为 不 起 作用 ， 因 为 在 设备 上 使 用 该 属性 时 需要 结合 设备 电量 、 具 体 地 理 情况 来 综 
合 考虑 。 因 此 ， 多 数 情况 下 把 该 属性 设置 为 默认 值 ， 由 设备 自身 来 调整 。 

e timeout: 对 地 理 位 置信 息 的 获取 操作 做 超时 限制 ， 单 位 为 毫秒 。 如 果 在 该 时 间 内 未 
获取 到 地 理 位 置信 息 ， 则 返回 错误 。 

e maximumAge: 对 地 理 位 置信 息 进 行 缓 存 的 有 效 时 间 单 位 为 毫秒 。 例 如 
maximumAge:120000(1 分 钟 是 60000 毫秒 ), 如 果 10 点 整 的 时 候 获取 过 一 次 地 理 位 置 
信息 ， 那 么 10:01 的 时 候 ， 再 次 调用 navigator.geolocation.getCurrentPosition 以 重新 获 
取 地 理 位 置信 息 ， 返 回 的 依然 为 10 完整 时 的 数据 ， 因 为 设置 的 缓存 有 效 时 间 为 两 分 
钟 。 超 过 这 个 时 间 后 ， 缓 存 的 地 理 位 置信 息 被 废弃 ， 尝 试 重新 获取 地 理 位 置信 息 。 
如 果 将 该 属性 的 值 指定 为 0， 将 无 条 件 重新 获取 新 的 地 理 位 置信 息 。 

这 些 可 选 属性 的 具体 设置 方法 如 下 : 
navigator.geolocation.getCurrentPosition( 

function(position) ( 
/获取 地 理 位 置信 息 成 功 时 所 做 的 处 理 


b 
function(error){ 
/获取 地 理 位 置信 息 失败 时 所 做 的 处 理 
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h 

/以 下 是 可 选 属性 

ü 
/设置 缓存 的 有 效 时 间 为 两 分 钟 
maximumAge:60*1000*2, 
//5 秒 钟 内 未 获取 到 地 理 位 置信 息 ， 则 返回 错误 
timeout:5000 

} 


) 
10.23 ”持续 监视 位 置信 息 


使 用 watchPosition 方 法 可 以 持续 获取 用 户 的 当地 地 理 位 置信 息 , 并 且 会 定期 地 自动 获取 。 
watchPosition 方法 的 使 用 格式 如 下 : 
int watchCurrentPosition(onSuccess,onError,options); 
该 方法 的 参数 说 明和 使 用 与 getCurrentPosition 方法 相同 ,调用 该 方法 后 会 返回 一 个 数字 ， 
这 个 数字 的 用 法 与 JavaScript 脚本 中 setInterval 方法 的 返回 值 的 用 法 类 似 ， 可 以 由 clearWatch 
方法 使 用 ， 以 停止 对 当前 地 理 位 置信 息 的 监视 。 


10.2.4 ”停止 获取 位 置信 息 


使 用 clearWatch 方法 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 ， 使 用 格式 如 下 : 
void clearWatch(watchId); 
参数 watchId 为 调用 watchCurrentPosition 方法 来 监视 地 理 位 置信 息 时 的 返回 参数 。 


10.2.55 ”隐私 保护 


Geolocation 规范 提供 了 一 套 保护 用 户 隐私 的 机 制 。 除 非得 到 用 户 明确 许可 ,否则 不 可 获 
得 位 置信 息 。 有 具体 设置 步骤 如 下 : 

(1) 用 户 从 浏览 器 打开 位 置 感知 应 用 程序 。 

(2) 加 载 应 用 程序 的 Web 页 面 , 然后 通过 Geolocation 函数 调用 请 求 位 置 坐标 。 浏 览 器 拦 
截 这 一 请 求 ， 然 后 请 求 用 户 授权 。 

G) 如 果 用 户 同意 ， 浏 览 器 就 从 其 宿主 设备 中 检索 坐标 信息 ， 如 IP 地 址 、Wi-Fi 或 GPS 
坐标 ， 这 是 浏览 器 的 内 部 功能 。 

(4) 浏览 器 将 坐标 发 送 给 受信 任 的 外 部 定位 服务 ， 返 回 详 细 的 位 置信 息 ， 并 将 位 置信 息 
发 回 给 Geolocation 应 用 程序 。 

需要 注意 的 是 ， 应 用 程序 不 能 直接 访问 设备 ， 而 只 能 请 求 浏览 器 来 代表 它 访问 设备 。 

访问 使 用 Geolocation API 的 页 面 时 , 会 触发 隐私 保护 机 制 。 如 果 仅仅 是 添加 Geolocation 
代码 ， 而 不 被 任何 方法 调用 ， 则 不 会 触发 隐私 保护 机 制 。 只 要 所 添加 的 Geolocation 代码 被 执 
fr, 浏览 器 就 会 提示 用 户 应 用 程序 要 共享 位 置 。 执行 Geolocation 的 方式 有 很 多 , 例如 ， 可 以 
调用 navigator.geolocation.getCurrentPosition 方法 等 。 

除了 询问 用 户 是 否 允许 共享 其 位 置 外 ， 一些 浏 览 器 还 可 以 让 用 户 选 择 记 住 该 网 站 的 位 置 
服务 权限 ， 以 便 下 次 访问 时 不 再 弹出 提示 框 ， 类 似 于 在 浏览 器 中 记录 某 些 网 站 的 密码 。 
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10.26 ”处 理 位 置信 息 


因 





户 没有 授权 存储 这 些 数据 ， 那 么 应 用 程序 应 该 在 相应 任务 完成 后 立即 删除 它们 。 如 果 要 重 传 
位 置 数 据 ， 建 议 先 对 其 进行 加 密 。 在 手机 上 获取 地 理 定位 数据 时 ， 应 用 程序 应 该 着 重 提示 | 











为 位 置 数据 属于 敏感 信息 ， 所 以 接收 到 之 后 ， 必 须 小 心地 处 理 、 存 储 和 重 传 。 如 果 用 



































户 以 下 内 容 : 会 收集 位 置 数据 ; 为 什么 收集 位 置 数据 ;位 置 数据 将 保存 多 久 ; 怎样 保证 数据 


的 安全 ; 


位 置 数据 怎样 共享 ， 如 果 同 意 ， 则 共享 ; 用 户 怎样 检查 和 更 新 它们 的 位 置 数据 。 


10.2.7 position 对 象 


如 


果 获 取 地 理 位 置信 息 成 功 ， 则 可 以 在 获取 成 功 后 的 回调 函数 中 通过 访问 position 对 象 


的 属性 来 得 到 这 些 地 理 位 置信 息 。position 对 象 具有 以 下 属性 : 


latitude: 当前 地 理 位 置 的 纬度 。 

Ingitude: 当前 地 理 位 置 的 经 度 。 

altitude: 当前 海拔 位 置 的 高 度 ， 不 能 获取 时 值 为 null。 

accuracy: 获取 到 的 纬度 和 经 度 的 精度 。 

altitudeAccurancy: 获取 到 的 海拔 高 度 的 精度 。 

heading: 设备 的 前 进 方向 。 用 面 朝 正 北 方向 的 顺 时 针 旋 转角 度 来 表示 。 
speed: 设备 的 前 进 速度 。 

timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 





【 例 10-1】 获取 当前 地 理 位 置 。 


<!DOCTYPE html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<title></title> 
<script type="text/javascript" sre=http://maps.google.com/maps/api/js?sensor=false></script> 
<script type="text/javascript"> 
function showObject(obj.k) { 
/递归 显示 object 
if(!obj) (retum:) 
for(var i in obj)( 
if(typeof(obj[1])!—"object" || obj[i]—null) ( 
for(var j=0;j<kj++){ 
document. write("&nbsp:&nbsp;&nbsp;&nbsp;"); 
3 
document.write(i +" : "+ obj[i] + "<br/>"); 


document-write(i +" : " + "<br/>"); 
showObject(obj[i] Jc): 
} 


} 
function get location()( 
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if(navigator.geolocation) 
navigator.geolocation.getCurrentPosition(show map.handle error, (enableHighAccuracy:true, 
maximumAge:1000]); 
else 
alert(" 你 的 浏览 器 不 支持 使 用 HTMLS 来 获取 地 理 位 置信 息 。"); 
} 
function handle error(err){ 
/错误 处 理 
switch(err.code) ( 
casel: 
alert(" 位 置 服务 被 拒绝 。"); 
break: 
case 2: 
alert(" 暂 时 获取 不 到 位 置信 息 。"); 
break: 
case 3: 
alert(" 获 取信 息 超时 。"); 
break; 
default: 
alert(" 未 知 错误 。"); 
break: 
b 
j 
function show map(position) ( 
// 显 示 地 理 信息 
var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
showObject(position.0): 
} 
get location(); 
</script> 
</head> 
<body> 
<div id="map" style="width:400px; height:400px"></div> 
</body> 


在 不 同 设备 的 浏览 器 中 运行 这 段 代码 ， 效 果 9 morpema x 
会 有 所 不 同 。 当 在 PC 上 的 Chrome 浏览 器 中 运行 。 《2 
时 ， 系 统 会 弹出 提示 框 ， 询 问 用 户 是 否 允 许 获取 
位 置信 息 ,如 图 10-1 所 示 。 只 有 在 用 户 允 许 之 后 ， 
应 用 才能 取得 当前 用 户 的 位 置信 息 。 uci GP ME 








10.3 ”使 用 百度 地 图 


自从 HTMLS 标准 确定 以 后 ， 越 来 越 多 的 网 站 使 用 HTMLS 来 进行 开发 。 高 版 本 的 浏览 
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器 对 HIMLS 有 良好 的 支持 ， 因 此 HTMLS 开发 热情 高 涨 。 本 节 将 介绍 使 用 HTMLS 调用 百 








度 地 图 API 进行 地 到 


本 节 的 示例 将 基于 百度 地 图 API， 调 用 百度 地 图 API， 实 现 以 下 功能 : 


定位 的 示例 。 








(1) 通过 人 P 地 址 获取 城市 地 址 (并 不 完全 准确 , 存在 代理 他 或 人 P 中 转 时 定位 与 实际 位 置 


不 一 致 的 情况 )。 
(2) 通过 移动 端 
(3) 根据 位 置 坐 
(4) 根据 位 置 坐 
(5) 通过 使 用 百 


浏览 器 及 GPS 定位 位 置 坐标 。 

标 转换 百度 地 图 坐标 。 

标 逆 推 城市 具体 地 址 (存在 一 定 误差 )。 
度 地 图 API 展示 地 理 位 置 及 添加 标注 。 





【 例 10-2】 使 用 百度 地 图 。 
<!DOCTYPE html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title> 地 理 位 置 测试 </title> 
«script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 
«script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertorjs"></script> 
<script type="text/javascript"> 
var map; 
var gpsPoint; 
var baiduPoint; 
var gpsAddress; 
var baiduAddress; 


function getLocation() { 


} 


/根据 下 获取 城市 
var myCity = new BMap.LocalCity(); 
myCity.get(getCityByIP): 


/获取 GPS 坐标 
if (navigator.geolocation) { 
navigator geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: 
true, maximumAge: 1000 }); 
J else { 
alert(" 您 的 浏览 器 不 支持 使 用 HTML 5 来 获取 地 理 位 置 服务 "); 
} 


function showMap(value) { 


var longitude = value.coords.longitude: 

var latitude — value.coords.latitude: 

map = new BMap.Map(" map"): 

Jalert(" 坐 标 经 度 为 : "+latitnade+"， 纬度 为 : "+longitude ); 
gpsPoint = new BMap.Point(longitude, latitude); — // 创建 点 坐标 
map.centerAndZoom(gpsPoint, 15); 
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/根据 坐标 逆 解 析 地 址 
var geoc — new BMap.Geocoder(): 
geoc.getLocation(gpsPoint, getCityByCoordinate); 


BMap.Convertor.translate(gpsPoint, 0, translateCallback); 
} 


translateCallback = function (point) { 
baiduPoint — point; 
var geoc = new BMap.Geocoder(): 
geoc.getLocation(baiduPoint, getCityByBaiduCoordinate); 


) 

function getCityByCoordinate(rs) { 
gpsAddress = rs.addressComponents; 
var address = "GPS 标注 : "+ gpsAddress province + "," + gpsAddress.city + "," + 

gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber; 

var marker = new BMap.Marker(gpsPoint); — // 创建 标注 
map.addOverlay (marker); / 将 标注 添加 到 地 图 中 
var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) }); 
marker.setLabel(labelgps): /添加 GPS 标注 

} 


function getCityByBaiduCoordinate(rs) { 
baiduAddress = rs.addressComponents; 
var address = "百度 标注 : "  baiduAddress.province + "," + baiduAddress.city + "," + 

baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber; 

var marker = new BMap.Marker(baiduPoint); // 创建 标注 
map.addOverlay(marker); / 将 标注 添加 到 地 图 中 
var labelbaidu = new BMap.Label(address, ( offset: new BMap.Size(20, -10) }); 
marker.setL abel(labelbaidu); /添加 百度 标注 

j 


/根据 正 获取 城市 
function getCityByIP(rs) { 
var cityName = rs.name; 
alert(" 根 据 IP 定位 您 所 在 的 城市 为 :"+ cityName); 


function handleError(value) { 
switch (value.code) { 

case 1: 
alert(" 位 置 服务 被 拒绝 "); 
break: 

case 2: 
alert(" 暂 时 获取 不 到 位 置信 息 "); 
break: 


case 3: 


第 10 3*  Geolocation 地 理 位 置 *181* 


alert(" 获 取信 息 超时 "); 
break: 


case 4: 
alert(" 未 知 错误 "); 
break: 


window.onload = init; 


<script> 
<head> 
<body> 
<div id="map" style="width:600px:height:600px:"></div> 
</body> 
<html> 


运行 以 上 程序 ， 当 浏览 器 询问 是 否 允 许 访问 地 址 和 是 否 允 许 浏览 器 使 用 当前 位 置 时 ， 选 
择 “ 允 许 ” 浏览 器 将 加 载 百度 地 图 ， 显 示 当 前 位 置 ， 还 可 以 移动 、 放 大 、 缩 小 地 图 ， 效 果 如 
图 10-2 所 示 。 
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图 10-2 浏览 器 加 载 百 度 地 图 并 显示 当前 位 置 
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HTMLS 新 增 了 Geolocation API( 地 理 位 置 应 用 编程 接口 ), 这 组 API 提供 了 一 种 可 以 准确 
感知 浏览 器 用 户 当 前 位 置 的 方法 。 如 果 浏览 器 支持 ， 且 设备 具有 定位 功能 ， 就 能 够 直接 使 / 
这 组 API 来 获取 当前 位 置信 息 。Geolocation API 可 以 应 用 于 移动 设备 上 的 地 理 位 置 应 用 。 

本 章 首先 介绍 了 Geolocation 位 置信 息 的 来 源 : 纬度 、 经 度 和 其 他 属性 ， 以 及 获取 这 些 数 
据 的 途径 ， 如 GPS, Wi-Fi 和 蜂窝 站 点 等 。 然 后 ， 讨 论 了 HIMLS 地 理 定位 数据 的 隐私 问题 ， 
以 及 浏览 器 如 何 使 用 这 些 数 据 。 最 后 ， 深 入 探讨 了 Geolocation API 在 实际 中 的 应 用 。 目 前 有 
两 种 类 型 的 定位 请 求 : 单 次 定位 请 求 和 重复 位 置 更 新 请 求 。 本 章 最 后 通过 两 个 示例 ， 向 大 家 
展示 了 如 何 综合 运用 地 理 位 置 接口 来 解决 问题 。 


10.5 思考 和 练习 























1. Geolocation API 的 作用 是 什么 ? 可 以 返回 什么 信息 ? 

2. 位 置信 息 的 来 源 有 哪儿 种 ? 请 作 简单 介绍 。 

3. TE HTMLS 中 ， 如 何 获取 当前 地 理 位 置 ? 

4. 如 何 持续 监视 位 置信 息 ? 当 不 需要 监视 位 置信 息 时 ， 如 何 停止 位 置 监视 功能 ? 
5. 尝试 使 用 百度 地 图 API 开发 一 个 计 步 器 。 
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过 去 Web 页 面 的 许多 视觉 效果 都 由 标记 元 素来 描述 , 直接 把 表示 页 面 结构 的 标记 与 表示 
页 面 外 观 的 标记 或 属性 混合 在 一 起 ，HTML 就 是 这 样 的 标记 语言 。 然 而 ， 之 后 出 现 的 严格 的 
XHTML 则 不 允许 出 现 用 于 描述 外 观 的 元 素 与 属性 ， 标 记 语言 只 用 于 描述 页 面 结构 。 描 述 外 
观 的 工作 则 交 给 用 层 受 样式 表 (Cascading Style Sheet，CSS) 语 法 编写 的 样式 表 来 完成 。 标 记 与 
样式 之 间 的 职责 区 分 为 Web 页 面 的 开发 、 维 护 甚至 运行 性 能 都 带 来 了 诸多 益处 ,而 这 种 解决 
方案 与 仅 使 用 标记 相 比 ， 优 势 巨大 。 

本 章 学 习 目 标 : 
CSS 的 发 展 历史 
为 文档 应 用 CSS 的 3 种 方式 
THE CSS3 的 新 增 特 性 
了 解 查看 CSS3 兼容 性 的 方法 


11.1 CSS 的 历史 变迁 


任何 工具 的 产生 都 有 必然 的 原因 ,包括 技术 ， 因 此 CSS 的 产生 也 不 例外 。 本 节 从 讲解 使 
用 HTML 标记 描述 网 页 的 结构 和 外 观 开 始 ， 然 后 讲解 CSS 产生 的 原因 一 一 结构 标记 和 外 观 属 
性 的 分 离 ， 接 着 介绍 CSS 的 发 展 历史 和 CSS3 的 新 特性 ， 最 后 用 一 个 例子 介绍 CSS3 的 应 用 。 


11.1.1 CSS 产生 的 原因 


HH], HTML 是 一 门 描述 外 观 的 语言 。 例 如 ，hl 元 素 即使 表示 标题 结构 ， 也 会 让 人 想到 
是 让 文本 字号 变 大 ， 示 例 代码 如 下 : 
<hl align="center">Big Centered Text!</h1> 
而 有 些 元 素 是 专门 用 于 描述 外 观 的 ， 例 如 font: 
<font size-"7" color-"red"-I am big and red!</font> 
不 仅 如 此 ， 对 于 一 些 浏览 器 专 有 的 元 素 而 言 ， 也 有 许多 用 于 描述 外 观 的 标记 。 例 如 ， 下 
面 的 标记 用 于 在 Firefox 浏览 器 中 创建 文本 闪烁 的 功能 : 
<blink>Proprietary HTML Tag Sale: 50% Off for Firefox Users!</blink> 
ZA HTML 的 设计 初衷 并 不 是 为 了 描述 外 观 ，HIML 本 身 也 并 不 善于 此 道 。 例 如 ， 如 
果 只 想 将 一 些 文本 颜色 设置 为 红色 ， 居 中 对 齐 ， 并 且 背 景色 设置 为 黄色 ， 那 么 就 要 使 用 下 面 
的 标记 来 实现 : 
<table align-"center" width="100%"> 
<tr> 
«td bgcolor-"yellow" align="center"> 
<font size-"7" 
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color-"red" 

face=" Arial, Helvetica, sans-serif 

Big Red HTML Text 

</font> 

</td> 

</tr> 

</table> 

由 此 可 见 ， 在 使 用 HTML 描述 Web 页 面 的 外 观 时 ， 需 要 使 用 大 量 的 标记 ， 而 且 常 常 要 使 用 

许多 复杂 堆栈 或 颈 套 表 。 页 面 的 布局 工作 涉及 隐藏 的 像素 图 像 、 专 有 元 素 与 属性 、 图 像 中 的 文本 
和 其 他 隐秘 的 复杂 方式 ， 这 些 都 需要 提供 高 质量 、 高 可 靠 度 的 HTML 标记 代码 ， 这 简直 就 是 一 
场 驱 梦 。 因 此 ， 人 们 用 HTML 标记 语言 描述 页 面 的 结构 ， 而 将 表示 网 页 外 观 的 功能 标记 或 属性 
分 离 出 来 ， 这 就 形成 了 表示 网 页 外 观 的 替代 方法 -一 层 簿 样式 表 (Cascading Style Sheet, CSS). 


11.1.2 CSS 的 发 展 历史 








1. CSS 的 诞生 

从 20 世纪 90 年 代 初 HIML 被 发 明 开 始 ， 样 式 表 就 以 各 种 形式 出 现 了 ， 不 同 的 浏览 器 结合 
了 它们 各 自 的 样式 语言 ， 浏 览 者 可 以 使 用 这 些 样 式 语 言 来 调节 网 页 的 显示 方式 (一 开始 样式 表 是 
给 浏览 者 用 的 )， 最 初 的 HIML 版 本 只 含有 很 少 的 显示 属性 ， 浏 览 者 决定 网 页 应 该 怎样 显示 。 

但 随 着 HTML 的 成 长 ， 为 了 满足 设计 师 的 要 求 ，HIML 获得 了 很 多 显示 功能 。 随 着 这 
些 功能 的 增加 ， 用 来 定义 样式 的 语言 越 来 越 没 有 意义 了 。 

1994 年 哈 坤 。 利 (Hakun Lee) 提 出 了 CSS 的 最 初 建议 。 伯 特 。 波斯 (Bert Bos) 当 时 正在 设 
计 一 款 名 为 Argo 的 浏览 器 ， 他 们 决定 一 起 合作 设计 CSS. 

当时 已 经 有 一 些 样式 表 语 言 的 建议 了 ， 但 CSS 是 第 一 个 含有 “ 层 登 ”含义 的 。 在 CSS 
中 ， 一 个 文件 的 样式 可 以 从 其 他 样式 表 中 继承 下 来 。 浏 览 者 在 有 些 地 方 可 以 使 用 自己 更 喜欢 
的 样式 ， 在 其 他 地 方 则 继承 或 “ 层 登 ”作者 的 样式 ， 这 种 层 登 的 方式 使 设计 者 和 读者 都 可 以 
灵活 地 加 入 自己 的 设计 ， 混 合 各 人 的 爱好 。 

哈 坤 。 利 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 展示 了 CSS 的 建议 ，1995 年 他 与 伯 
特 。 波 斯 一 起 再 次 展示 这 个 建议 。 当 时 W3C 刚刚 建立 ，W3C 对 CSS 的 发 展 很 感 兴趣 ， 并 为 
此 组 织 了 一 次 讨论 会 。 哈 坤 。 利 、 伯 特 。 波 斯 和 其 他 一 些 人 (比如 微软 的 托马斯 。 雷 尔 登 ) 是 这 
个 项 目的 主要 技术 负责 人 。1996 年 底 ，CSS 已 经 完成 。1996 年 12 月 CSS 的 第 一 版 本 被 发 布 。 

1997 年 初 ，W3C 组 织 了 专门 掌管 CSS 的 工作 组 ， 其 负责 人 是 克 里 斯 。 里 雷 。 这 个 工作 
组 开始 讨论 第 一 版 中 没有 涉及 的 问题 ， 其 结果 是 1998 年 5 HRAT CSS 的 第 二 版 。 到 目前 
Jub. CSS 已 经 发 展 到 第 三 版 。 

2. 使 用 CSS+div 的 优点 

采用 CSS+div 进行 网 页 重 构 ， 相 对 于 传统 的 表格 网 页 布局 方式 具有 以 下 3 个 显著 优势 : 

(1) 表现 和 内 容 相 分 离 

将 设计 部 分 剥离 出 来 放 在 一 个 独立 的 样式 文件 中 ，HTML 文件 中 只 存放 文本 信息 。 这 样 
的 页 面 对 搜 索引 擎 更 加 友好 。 

Q) 提高 页 面 浏览 速度 

对 于 同一 个 页 面 视觉 效果 , 采用 CSS+div 重 构 的 页 面容 量 要 比 表 格 编码 的 页 面 文件 容量 
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小 得 多 ， 前 者 一 般 只 有 后 者 的 一 半 大 小 。 浏 览 器 不 用 去 编译 大 量 宛 长 的 标签 。 

(3) 易于 维护 和 改版 

只 要 简单 地 修改 几 个 CSS 文件 就 可 以 重新 设计 整个 网 站 的 页 面 。 

3. CSS2 

CSS 自从 第 一 版 发 布 之 后 ， 又 在 1998 年 5 月 发 布 了 第 二 版 ，CSS 得 到 了 丰富 。 

CSS 2.0 是 一 套 全 新 的 样式 表 结 构 ， 是 由 W3C 推行 的 ， 同 以 往 的 CSS 1.0 8È CSS 12 完 
全 不 一 样 ，CSS 2.0 推荐 的 是 一 套 内 容 和 表现 效果 分 离 的 方式 ，HTML 元 素 可 以 通过 CSS 2.0 
的 样式 控制 显示 效果 , 可 完全 不 使 用 以 往 HTML 中 的 table 和 纪元 素来 定位 表单 的 外 观 和 样式 ， 
只 需要 使 用 div 和 二 之 类 的 HTML 标签 来 分 割 元 素 ,之 后 即 可 通过 CSS 2.0 样式 来 定义 表单 界 
面 的 外 观 。 

CSS 2.0 提供 了 一 个 机 制 ， 让 程序 员 开发 时 可 以 不 考虑 显示 和 界面 ， 就 可 以 制作 表单 ， 
显示 问题 可 由 美工 或 程序 员 到 后 期 再 编写 相应 的 CSS 2.0 样式 来 解决 。 不 过 ， 由 于 没有 很 好 
的 CSS 2.0 编辑 软件 ， 所 以 无 法 做 到 所 见 即 所 得 ， 编 写 起 来 不 易 。 

4. CSS3 

CSS3 在 CSS2 的 基础 上 ， 结 合 业务 发 展 需求 ， 以 及 过 去 浏览 者 操作 习惯 和 开发 者 习惯 ， 
做 了 大 幅 改 进 。 

(1) 模块 化 

CSS3 语言 在 朝 着 模块 化 方向 发 展 。 以 前 的 规范 作为 一 个 模块 实在 是 太 庞 大 且 比 较 复杂 ， 
所 以 把 它 分 解 为 一 些小 的 模块 ， 更 多 新 的 模块 也 被 加 入 进来 。 这 些 模块 包括 : 盒子 模型 、 列 
表 模 块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边框 、 文 字 特 效 、 多 栏 布局 。 

(2) 选择 器 

CSS3 增加 了 更 多 的 选择 器 ， 可 以 实现 更 简单 却 更 强大 的 功能 ， 比 如 :nth-child( ) 等 。 

(3) 时 间 表 

有 几 个 模块 现 已 完成 ， 包 括 SVG( 可 扩展 矢量 图 形 )、 媒 介 资 源 类 型 和 命名 ， 而 其 他 模块 
开发 工作 仍 在 进行 中 。Web 浏览 器 将 全 面 支持 CSS3 的 各 种 新 特性 , 一些 新 的 探索 已 经 开始 。 
针对 不 同 浏览 器 ， 新 的 功能 是 逐渐 应 用 的 ， 仍 然 需 要 一 到 两 年 的 时 间 ， 每 一 个 新 的 模块 才 有 
可 能 被 广泛 应 用 。 

(4) CSS3 的 影响 

首先 ，CSS3 将 完全 向 后 兼容 ， 所 以 没有 必要 修改 现在 的 设计 来 让 它们 继续 运作 。 网 络 
浏览 器 也 还 将 继续 支持 CSS2。 对 于 开发 者 来 说 ，CSS3 带 来 的 主要 影响 是 可 以 使 用 新 的 可 用 
的 选择 器 和 属性 ， 这 会 允许 你 实现 新 的 设计 效果 ( 壁 如 动态 和 渐变 )， 而 且 可 以 很 简单 地 设计 
出 现 有 的 设计 效果 (比如 使 用 分 栏 )。 


11.1.3 Hello CSS World 















































在 实际 讲解 CSS 之 前 ， 首 先 来 看 一 个 示例 ， 该 例 将 在 一 个 HTML 文档 的 <head> 元 素 中 
使 用 <style> 标 签 定义 一 个 样式 ， 该 样式 将 作用 于 整个 文档 。 
【 例 11-1】 一 个 使 用 CSS 样式 表现 网 页 外 观 的 例子 。 


<!DOCTYPE html> 
<html> 
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<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8"- 
-«title-Hello CSS World</title> 
<style type="text/css"> 
/* sample style sheet */ 
body {background-color: black:color: white; } 
hl (color: red;font-size: xx-large:text-align: center; } 
#heart (color: red;font-size: xx-large;} 
„fancy {background-color: orange;color: black;font-weight: bold:} 
</style> 
</head> 
<body> 
<hl>Welcome to the World of CSS</h1> 
<h> 
<p>CSS<em class-"fancy really </em> isn't so hard either! </<p> 
«p»Soon you will also-span id=" heart ">&hearts; </span> <using CSS</p>. 
«p» You can put lots of text here if you want. 
We could go on and on with-span class-"fancy "fake —/span»text for you 
to read, but let's get back to the book. </p> 
</body> 
<html> 
这 个 示例 文档 使 用 了 一 些 常 见 的 CSS 特性 ， 
使 用 background-color 和 color 设置 颜色 
使 用 font-size 设置 文本 大 小 
使 用 font-weight 设置 文本 的 粗细 
使 用 text-align 设置 基本 的 文本 对 齐 方式 
使 用 id 和 class 属性 指定 绑 定 样式 规则 的 元 素 
使 用 <em> 这 样 的 逻辑 标记 ， 与 显示 外 观 的 标记 相对 应 ， 例 如 <i> 
根据 普通 的 标签 容器 (如 <span>)， 来 定义 任意 部 分 文本 的 样式 


其 中 文档 的 结构 与 前 面 略 有 不 同 : 











propos gu 











此 外 , 除了 这 里 看 到 的 CSS 特性 , 接 下 来 可 能 还 会 用 到 其 他 更 多 的 CSS 特性 。 如 图 11-1 
所 示 ， 可 以 看 到 Web 页 面 的 CSS 版 本 与 HIML 版 本 的 对 比 。 


纯 HIML 





目 





Welcome to the World of HTML 使 用 CSS 样式 的 HTML 





图 11-1 Hello CSS World 示例 的 显示 效果 
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从 示例 呈现 出 来 的 CSS 代码 可 以 看 出 ，CSS 既 独 立 于 HIML， 又 依赖 HIML。CSS 不 是 
标记 语言 的 替代 品 ， 它 实际 上 依赖 标记 语言 ， 规 定 了 标记 语言 显示 的 外 观 。 例 如 ， 如 果 一 个 
HTML 文档 格式 不 正确 、 结 束 标签 不 正确 或 有 其 他 错误 ，CSS 就 可 能 不 正确 ， 页 面 外 观 就 会 扭 
曲 。 然 而 ，CSS 规则 也 可 能 出 错 ， 一 般 是 由 于 浏览 器 解析 比较 严格 ， 从 而 造成 视觉 呈现 问题 。 
WAR. CSS 和 HTML 之 间 存 在 一 种 共生 关系 ， 但 这 一 关系 也 随时 间 发 生 了 变化 。 


11.1.4 ”为 文档 应 用 CSS 的 方式 


如 何 使 用 CSS 样式 来 规定 网 页 外 观 呢 ? 在 规定 网 页 外 观 的 时 候 ， 又 是 如 何 将 样式 和 
HTML 标记 关联 起 来 的 ? 本 节 主 要 介绍 这 些 内容 。 
H^c. CSS 提供 了 三 种 使 用 方式 : 第 一 ， 内 联 样式 表 ， 通 过 HTML 元 素 的 style 属性 直 
接 将 样式 嵌入 HTML 标记 ; 第 二 ， 样 式 规则 块 ， 将 表示 样式 的 style 属性 的 内 容 ， 全 部 提 到 
公共 的 样式 规则 块 中 ， 以 方便 管理 和 扩展 ， 第 三 ， 外 部 链接 样式 文件 ， 将 样式 彻底 独立 成 文 
件 ， 供 任何 页 面 调用 。 
1. 内 联 样式 表 
CSS 规则 要 求 属性 名 的 后 面 紧 跟 一 个 冒号 , 然后 是 属性 值 。 每 一 个 样式 规则 以 分 号 结束 ， 
而 最 后 一 个 样式 规则 的 结尾 可 以 不 加 分 号 。 格 式 如 下 : 
property-namel : valuel; ... property-nameN : valueN; 
通过 将 样式 规则 赋值 给 核心 属性 style, CSS 规则 可 以 直接 放 入 大 多 数 HTML. 标签 中 。 
下 面 的 例子 给 一 个 hl 标题 设置 颜色 ， 并 且 居 中 对 齐 : 
<hl style="color: red; text-align: center:">Big Red CSS Text!-/h1^ 
这 种 直接 使 用 CSS 的 方法 叫做 内 联 样式 表 ， 在 实际 项 目 中 ， 不 提倡 这 种 使 用 CSS 的 方 
式 ， 因 为 与 HTML 标签 结合 得 太 紧密 。 
2. 样式 规则 块 
为 了 避免 样式 和 标签 的 关系 过 于 紧密 ， 可 以 采用 另外 一 种 更 合适 的 方法 来 避免 直接 在 标 
记 元 素 中 添加 样式 规则 ， 那 就 是 创建 与 一 个 特定 元 素 或 一 组 元 素 绑 定 的 样式 规则 ， 这 样 可 以 
重复 使 用 样式 规则 。 不 在 特定 标签 中 创建 的 CSS 规则 由 一 个 选择 器 和 后 面包 含 在 大 括号 中 相 
关联 的 样式 规则 组 成 。 语 法 格式 如 下 : 
selector {property1 : valuel: ... propertyN : valueN:} 
图 11-2 对 符合 CSS 语法 的 正确 样式 规则 进行 了 分 解说 明 。 











属性 名 [Hf 声明 分 隔 符 
hl (font-size: xx-large;" color: red;) 
LJ m Lew - ak 
选择 器 一 一 一 一 一 一 声明 块 — i 





图 11-2 Css 语法 分 解 图 





当 CSS 属性 名 是 多 个 单词 时 ， 应 该 用 短 横 线 分 隔 ， 例 如 font-face, font-size. line-height 
等 。CSS 属性 值 允许 多 种 形式 ， 例 如 关键 字 Cx-smal)、 字 符 串 (AriaD)、 数 字 (0)、 带 单位 的 数 
字 (100px 或 2cm) 和 特殊 值 ， 如 URL(url(../styles/fancy.css)) 等 。 

参考 【 例 11-1】， 样 式 规则 块 要 放 在 文档 head 元 素 的 <style> 标 签 中 ， 示 例如 下 : 
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<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8"-- 
«title-Hello CSS World</title> 
<style type="text/css"> 
/* sample style sheet */ 


3. 外 部 链接 样式 文件 
以 上 面 两 种 方式 定义 的 CSS 样式 ， 只 能 在 当前 页 面 中 使 用 。 但 在 实际 网 站 建设 中 ， 整 个 
网 站 有 统一 的 风格 ， 因 此 不 同 的 页 面 肯定 会 有 一 样 的 样式 。 这 时 候 ， 可 以 将 共同 的 样式 抽取 
出 来 , 保存 到 单独 的 CSS 文件 中 。 在 页 面 中 使 用 时 , 通过 在 文档 的 head 部 分 使 用 <link> 标 签 ， 
引用 外 部 链接 样式 ， 示 例 代码 如 下 : 
<link href-"mystyle.css" rel="stylesheet" type="text/css"> 
上 面 提 到 的 外 部 样式 表 mystyle.css 只 包括 CSS 规则 ， 而 没有 HTML 标记， 例如 : 
/* mystyle.css - a sample style sheet */ 
h1 (color: red; text-align: center) 
p (line-height: 15096) 


1.2. TAR CSS3 APRE 


在 Web 开发 中 采用 CSS 技术 ， 可 以 有 效 地 控制 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 
效果 。 只 需要 做 一 些 简 单 的 修改 ， 就 可 以 改变 网 页 的 外 观 和 格式 。CSS3 是 CSS 的 升级 版 本 ， 
这 套 新 标准 提供 了 更 加 丰富 且 实 用 的 规范 ， 如 盒子 模型 、 列 表 模 块 、 超 链接 方式 、 语 言 模块 、 
背景 和 边框 、 文 字 特 效 、 多 栏 布局 等 ， 目 前 有 很 多 浏览 器 已 经 相继 支持 这 项 升级 的 规范 ， 如 
Firefox, Chrome. Safari, Opera 等 。 在 Web 开发 中 采用 CSS3 技术 将 会 显著 美化 应 用 程序 ， 
提高 用 户 体验 ， 同 时 也 能 极 大 提高 程序 的 性 能 。 本 节 将 重点 介绍 一 些 CSS3 新 特性 。 


11.2.1 CSS3 选择 器 


CSS 属性 之 所 以 能 应 用 到 相应 的 节点 上 , 就 是 因为 CSS 选择 器 模式 ,首先 来 看 一 下 CSS2 
提供 的 主要 定位 方式 。 代 码 如 下 : 
body > .mainTabContainer div> span[5]( 
Border: 1px solod red; 
Background-color: white: 
Cursor: pointer; 
j 
以 上 CSS 选择 器 “body> .mainTabContainer div>span[5]” 代 表 这 样 一 条 路 径 : 
(1) body 标签 的 直接 子 元 素 中 class 属性 值 为 “mainTabContainer” 的 所 有 元 素 A。 
(2) A 的 后 代 元 素 中 标签 为 div 的 所 有 元 素 B- 
(3) B 的 直接 子 元 素 中 第 5 个 标签 为 span 的 元 素 C。C 元 素 (可 能 为 多 个 ) 即 为 选择 器 定位 
到 的 目标 元 素 ， 以 上 CSS 属性 会 被 全 部 应 用 到 C 元 素 。 
CSS3 提供 了 更 多 、 更 加 方 使 快捷 的 选择 器 ， 例 如 : 

















第 11 章 CSS3 概述 * 189° 


body -mainTabContainer tbody:nth-child(even) ( 
Background-color: white; 

} 

body >.mainTabContainer tr:nth-child(odd){ 
Background-color: black; 

} 


:not(.textinput) { 
Font-size: 12px; 
der 
Border-color: red; 
H 
以 上 列举 的 CSS3 选择 器 ,是 CSS3 的 新 特性 , 解决 了 很 多 之 前 需要 用 JavaScript 脚本 才 
能 解决 的 问题 。 例 如 : 

e tbody:nth-child(even), nth-child(odd): 此 处 它们 分 别 代表 表格 (tbody) 下 方 的 偶数 行 和 
奇数 行 (r)， 这 种 样式 非常 适合 于 表格 ， 让 人 能 非常 清楚 地 看 到 表格 的 行 与 行 之 间 的 
差别 ， 让 用 户 易 于 浏览 。 

e not(textinput): 表示 所 有 class 不 是 textinput 的 节点 。 

e divfirst-child: 表示 所 有 div 节点 下 的 第 一 个 直接 子 节点 。 

另外 ，CSS3 还 新 添加 了 以 下 选择 器 : E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of- 

type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type. E:empty、 E:checked, E:enabled、 
E:disabled、E::selection、E:not(s)。 这 些 标记 将 在 后 面 介绍 。 利 用 这 些 新 特性 ， 可 以 极 大 程度 
地 减少 不 必要 代码 。 


11.22 引用 服务 器 端 字体 


CSS3 中 的 font-face 可 以 用 来 加 载 字体 样式 ， 而 且 还 能 够 加 载 服务 器 端的 字体 文件 ， 可 
避免 因 客户 端 没 有 安装 需要 的 字体 而 产生 的 问题 。 
加 载 客户 端 字体 的 方式 如 下 : 
<p><font face="arial">arial courier verdana</font></p> 
BÀ: 
<p><font style-"font-family: arial">arial courier verdana</font></p> 
可 以 通过 这 种 方式 直接 加 载 字体 样式 ， 因 为 这 些 字体 已 经 安装 到 客户 端 了 。 
当 未 在 客户 端 安装 字体 样式 时 ， 在 CSS3 中 ， 可 以 使 用 服务 器 端 字体 ， 代 码 如 下 : 

















@font-face { 
font-family: BorderWeb; 
src:ur(BORDERWO.eot); 
H 
(Qfont-face { 
font-family: Runic; 
SIC:url(RUNICMTO.eot); 
} 


-border ( FONT-SIZE: 35px; COLOR: black; FONT-FAMILY:"BorderWeb"} 
.event ( FONT-SIZE: 110px; COLOR: black: FONT-FAMILY:"Runic"j 
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以 上 代码 声明 了 两 个 服务 器 端 字 体 ， 其 字体 源 指向 “BORDERW0.eot” 和 “RUNICMTO0.eot” 
文件 ， 并 分 别 冠 以 “BorderWeb ”和 “Runic” 字 体 名 称 。 声 明之 后 ， 即 可 在 页 面 中 使 用 : 
“FONT-FAMILY:"BorderWeb"” 和 “FONT-FAMILY:"Runic"”, 

这 种 做 法 使 得 在 开发 中 ， 当 需要 使 用 一 些 特殊 字体 ， 但 又 不 确定 客户 端 是 否 已 安装 时 ， 
便 可 以 使 用 这 种 方式 。 


11.23 换行 处 理 




















1.word-wrap 属性 
word-wrap 属性 主要 用 于 指定 在 当前 行 超过 指定 容器 的 边界 时 如 何 处 理 。 示 例 代 码 如 下 : 
«div style-"width:300px; border: 1px solid #999999; overflow: hidden" 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div> 
<div style-"width:300px; border: 1px solid #999999; word-wrap:break-word:"> 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div> 
以 上 代码 中 的 两 个 div 标签 的 运行 效果 如 图 11-3 所 示 。 





wor dwrapbreakwor dwor dwr: apbreakwordword 
(a) 第 一 个 没有 word-wrap 属性 的 div 效果 
|wordwrapbreakwordwordwrapbreakwordword | 
rapbreakwordwordwrapbreakword 
(b) 第 二 个 有 word-wrap 属性 的 div 效果 


图 11-3 有 无 word-wrap 属性 的 区 别 


2. text-overflow 
text-overflow 与 word-wrap 是 协同 工作 的 , word-wrap 用 于 设置 或 检索 在 当前 行 超过 指定 
容器 的 边界 时 是 否 断 开 转行 ， 而 text-overflow 则 用 于 设置 或 检索 在 当前 行 超过 指定 容器 的 边 
界 时 如 何 显示 ， 示 例 代码 如 下 : 
.clip{text-overflow:clip; overflow:hidden; white-space:nowrap: width:200px;background:#ccc;} 
ellipsis (text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc:} 
«div class="clip"> 
不 显示 省 略 标记 ， 而 是 简单 的 裁 切 条 
</div> 
<div class="ellipsis"> 
当 对 象 内 的 文本 溢出 时 显示 省 略 标记 
</div> 
这 里 使 用 overflow:hidden 来 设置 内 容 超 过 指定 容器 text-overflow : clip 
的 边界 时 如 何 显示 。 对 于 text-overflow 属性 ， 有 clip 和 EINEN 
ellipsis 两 种 方式 可 供 选 择 ， 前 者 为 不 显示 超出 的 内 容 ， 1 Pin 
当 对 象 内 文本 溢出 时 显示 … 


是 用 “…” 来 表示 有 内 容 超出 容器 的 边界 ， 
Sopi . 来 表示 有 内 容 超出 容器 的 边界 ， 效 果 如 图 11-4 text-overflow 属性 取 值 为 clip 
X I 不 。 和 ellipsis 时 的 区 别 
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11.24 XA 


CSS3 开始 支持 对 文字 进行 更 深层 次 的 演 染 ， 示 例 代 码 如 下 : 
div( 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
} 
其 中 , text-fill-color 属性 指定 文字 内 部 填充 颜色 ; text-stroke-color 属性 指定 文字 边界 填充 


颜色 ， text-stroke-width 属性 指定 文字 边界 宽度 。 这 段 代 码 在 webkit 内 核 浏览 器 中 的 运行 效果 


文本 泻 染 效果 


图 11-5 文字 泻 染 效果 





11.2.5 ”多 栏 布局 


CSS3 可 以 做 简单 的 布局 处 理 了 ,这 个 新 特性 又 一 次 减少 了 页 面 的 JavaScript 代码 量 。 示 
例 代码 如 下 : 
multi column style{ 
-webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb; 
-webkit-column-gap: 2em; 
l 
«div class="multi_column style"> 
</div> 
在 上 面 这 段 代码 中 ，column-count 属性 表示 布局 几 列 ，column-rule 属性 表示 列 与 列 之 间 
的 间隔 条 的 样式 ，column-gap 属性 表示 列 与 列 之 间 的 间隔。 这 段 代 码 在 webkit 内 核 浏览 器 中 


的 运行 效果 如 图 11-6 所 示 。 
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图 11-6 多 列 布局 效果 


11.2.6 ”边框 和 颜色 
CSS3 对 颜色 提供 了 透明 度 支持 ， 示 例 代码 如 下 : 
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color: rgba(255, 0, 0, 0.75); 
background: rgba(0, 0, 255, 0.75); 
这 里 的 rgba 属性 中 的 a 代表 透明 度 ， 也 就 是 这 里 的 0.75。 同 时 CSS3 还 支持 HSLA 颜色 
声明 方式 及 透明 度 ， 示 例 代码 如 下 : 
color: hsla( 112, 72%, 3396, 0.68); 
对 于 边框 ，CSS3 提供 了 圆 角 支持 ， 示 例 代码 如 下 : 
border-radius: 15px; 
效果 如 图 11-7 所 示 。 





图 11-7 贺 角 效果 


11.2.7 ”渐变 效果 


绘制 左上 (0% 0%) 到 右上 (0% 100%)， 即 从 左 到 右 的 水 平 渐变 ， 代 码 如 下 : 
background-image:-webkit-gradient(linear,0% 0%,100% 096, from(42A8BBE).to(&FE280E)); 
其 中 ，linear 表示 线性 渐变 ， 从 左 到 右 ， 由 蓝 色 (#2A8BBE) 到 红色 (#FE280E) 渐 变 ， 效 果 
如 图 11-8 所 示 。 


图 11-8 ”从 左 到 右 的 线性 渐变 效果 
同 理 ， 也 可 以 绘制 从 上 到 下 、 任 何 颜色 间 的 渐变 转换 ， 效 果 如 图 11-9 所 示 。 


图 11-9 各 种 不 同 线性 渐变 的 效果 图 


还 可 以 绘制 更 复杂 的 渐变 ， 如 水 平 渐变 ，33% 处 为 绿色 ，66% 处 为 橙色 ， 示 例 代码 如 下 ， 
效果 如 图 11-10 所 示 。 


background-image:-webkit-gradient(linear 096 096.10096 096.fom(f2 ASBBE), color-stop(0.33 &AADO10), 
color-stop(0.33 &FF7F00).to(&FE280E)): 


图 11-10 复杂 线性 渐变 的 效果 图 
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2. 径 向 渐变 

除了 线性 渐变 ， 还 可 以 绘制 径 向 渐变 。 径 向 渐变 不 是 从 一 个 点 到 另 一 个 点 的 渐变 ， 而 从 
一 个 圆 到 另 一 个 圆 的 渐变 ， 不 是 放射 渐变 ， 而 是 径 向 渐变 。 例 如 ， 下 面 是 目标 半径 为 0 的 浙 
变 的 代码 ; 

backgroud:-webkit-gradient(radial,50 50,50,50 50.0.from(black).color-stop(0.5.red).to(blue)); 

前 面 的 “50.50.50” 是 起 始 圆 的 圆心 坐标 和 半径 ， 随 后 的 “50.50.0” 是 目标 圆 的 圆心 坐 
标 和 半径 , “colorstop(0.Sred)” 是 断 点 的 位 置 和 色彩 。 这 里 需要 注意 的 是 ， 和 放射 由 内 至 外 
不 一 样 ， 径 向 渐变 刚好 相反 ， 是 由 外 到 内 的 渐变 。 这 里 是 两 个 同心 圆 ， 外 圆 半径 为 50px， 内 
圆 半 径 为 0, 那么 就 是 从 黑色 到 红色 , 再 到 蓝 色 的 正 圆 形 渐变 。 这 段 代 码 的 运行 效果 如 图 11-11 
Brass 






































图 11-11 目标 圆 半径 为 0 的 径 向 渐变 效果 图 


11.2.8 ”阴影 和 反射 效果 


阴影 效果 既 可 用 于 普通 元 素 ， 也 可 用 于 文字 ， 例 如 : 
.Classl{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 


ji 
.Class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3): 


} 
在 以 上 代码 中 ， 对 于 文字 阴影 ， 表 示 X 轴 方 向 阴影 向 右 Spx，Y 轴 方 向 阴影 向 下 2px, 


而 阴影 的 模糊 半径 为 6px、 颜 色 为 Tgba(64.64.64.0.5)。 其 中 ， 偏 移 量 可 以 为 负 值 ， 负 值 表示 反 
向 。 与 为 元 素 设 置 阴影 类 似 。 运 行 以 上 代码 ， 效 果 如 图 11-12 所 示 。 


阴影 效果 


图 11-12 元 素 和 文字 的 阴影 





还 可 以 使 用 新 增 的 反射 功能 来 绘制 出 水 中 倒影 的 效果 ， 示 例 代码 如 下 : 
.ClassReflect{ 
-webkit-box-reflect: below 10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); 
} 
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在 以 上 代码 中 ,“-webkitbox-reflect below 10px” 表 示 反 射 到 元 素 下 方 10px 的 位 置 ， 再 
配 上 渐变 效果 ， 效 果 如 图 11-13 所 示 。 


Web 2.0 


AACO NCO 





图 11-13 反射 效果 


11.2.9 背景 效果 


CSS3 中 新 增 了 一 些 关 于 背景 的 属性 。 例 如 ，Background Clip 属性 用 于 确定 背景 区 域 ， 
取 值 如 下 : 

* border-box: 背景 从 border 开始 显示 。 

e padding-box: 背景 从 padding 开始 显示 。 

e contentbox: 背景 从 content 区 域 开始 显示 。 

e no-clip: 默认 属性 ， 等 同 于 border-box. 

通常 情况 下 ， 背 景 都 是 覆盖 整个 元 素 ，CSS3 允许 开发 者 设置 是 否 一 定 要 这 样 覆 盖 整 个 
元 素 。 因 此 ， 开 发 者 可 以 设置 背景 颜色 或 图 片 的 覆盖 范围 。 

其 次 ，Background Origin 属性 用 于 确定 背景 的 位 置 ， 通 常 与 background-position 联合 使 
用 ， 可 以 从 border. padding. content 来 计算 background-position( 就 像 background-clip)。 
Background Origin 属性 的 取 值 如 下 : 

* border-box: 从 border 开始 计算 background-position。 

e padding-box: 从 padding 开始 计算 background-position。 

e content-box: 从 content 开始 计算 background-position。 

还 有 ，Background Size 属性 常用 来 调整 背景 图 片 的 大 小 ， 注 意 别 和 Background Clip 弄 
混 ， 这 个 属性 主要 用 于 设 定 图片 本 身 ， 取 值 如 下 : 

e contain: 缩小 图 片 以 适合 元 素 (维持 像素 长 宽 比 )。 

e cover: 扩展 元 素 以 填补 元 素 (维持 像素 长 宽 比 )。 

e 100px 100px: 缩小 图 片 至 指定 的 大 小 。 

e 509610096: 缩小 图 片 至 指定 的 大 小 ， 百 分 比 是 相对 包含 元 素 的 尺寸 。 

最 后 ，CSS3 还 新 增 了 Background Break 属性 ， 使 元 素 可 以 被 分 成 几 个 独立 的 盒子 ， 如 
使 内 联 元 素 span 跨越 多 行 。Background Break 属性 用 来 控制 背景 怎样 在 这 些 不 同 的 盒子 中 显 
示 ， 取 值 如 下 : 

e continuous: 默认 值 。 忽 略 盒 子 之 间 的 距离 (就 像 元 素 没有 被 分 成 多 个 盒子 ， 依 然 是 一 

个 整体 一 样 )。 
* bounding-box: 把 盒子 之 间 的 距离 计算 在 内 。 
e cach-box: 为 每 个 盒子 单独 重 绘 背景 。 
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以 上 这 些 属 性 使 开发 者 可 以 为 页 面 或 元 素 设置 复杂 的 背景 ， 并 支持 多 背景 图 片 ， 示 例 代 
码 如 下 : 
div{ 
background: url(src/zippy-plus.png) 10px center no-repeat, 
url(src/gray lines bg.png) 10px center repeat-x; 





j 
以 上 代码 为 同一 元 素 设置 了 两 个 背景 ， 其 中 一 个 背景 重复 显示 ， 另 一 个 背景 不 重复 。 运 
行 效果 如 图 11-14 所 示 。 


图 11-14 多 背景 效果 


11.2.10 ”盒子 模型 


盒子 模型 为 开发 者 提供 了 一 种 非常 灵活 的 布局 方式 ， 但 是 支持 这 一 特性 的 浏览 器 并 不 
多 ， 目 前 只 有 采用 webkit 内 核 的 新 版 Safari 和 Chrome 浏览 器 以 及 采用 gecko 内 核 的 新 版 
Firefox 浏览 器 。 
下 面 是 一 个 盒子 模型 的 示例 代码 : 
<div class="boxcontainer"> 
<div class="item">1 </div> 
<div class="item">2 </div> 
<div class="item">3 </div> 
<div class="item flex">4 </div> 
</div> 
默认 情况 下 ，boxcontainer 和 item 这 两 个 class 元 素 里 面 没 有 特殊 属性 ， 由 于 div 是 块 状 
元 素 ， 因 此 其 排列 应 如 图 11-15 所 示 。 











图 11-15 盒子 模型 示例 


下 面 加 入 CSS3 盒子 模型 属性 ， 代 码 如 下 : 
.boxcontainer { 
width: 1000px: 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-orient: horizontal; 
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-moz-box-orient: horizontal: 
) 


background: #357c96; 
D 
margin: 2px; 
padding: 20px; 
color: Zfff; 
font-family: Arial, sans-serif; 
) 
注意 这 里 的 “display:-webkit-box:display:-moz-box;”， 它 针对 webkit 和 gecko 浏览 器 定义 
了 元 素 的 盒子 模型 。“-webkit-box-orienthorizontal:” 表 示 水 平 排列 的 盒子 模型 。 
运行 代码 ， 效 果 如 图 11-16 所 示 。 


回回 图 图 


细心 的 读者 会 看 到 ,“ 盒 子 ”的 右 侧 多 出 来 很 大 一 块 ， 这 是 怎么 回 事 呢 ?” 下 面 介绍 一 个 
比较 有 特点 的 属性 ，flex。 示 例 代码 如 下 : 
<div class="boxcontainer"> 
<div class="item"> 1 </div> 
<div class="item"> 2 </div> 
<div class="item"> 3 </div> 
<div class="item flex"> 4 </div> 
</div> 
flex { 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 














图 11-16 水 平 显示 的 盒子 模型 效果 


} 
运行 以 上 程序 ， 效 果 如 图 11-17 所 示 ， 可 以 看 到 ， 第 4 个 “盒子 ” 铺 满 右 侧 所 有 的 空间 。 


图 11-17 ” 铺 满 右 侧 空间 的 盒子 模型 效果 











下 面 再 来 调整 一 下 box-flex 属性 的 值 ， 示 例 代码 如 下 : 
<div class="boxcontainer"> 
<div class="item">1 </div> 
<div class="item"> 2 </div> 
<div class="item flex2"> 3 </div> 
<div class="item flex"> 4 </div> 
</div> 
flex { 
-webkit-box-flex: 1; 
-moz-box-flex: 1; 
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} 

flex2 { 
-webkit-box-flex: 2; 
-moz-box-flex: 2; 





) 
这 里 为 倒数 第 二 个 元 素 (元 素 3) 也 加 上 “box-flex” 属 性 ， 并 将 其 值 设 为 2， 运 行 效果 如 
图 11-18 所 示 。 由 此 可 见 ， 元 素 3 和 元 素 4 按 2:1 比例 的 方式 填充 外 层 “ 容 器 ”的 余下 区 域 ， 
这 就 是 box-flex 属性 的 进 阶 应 用 。 


图 11-18 添加 多 个 box-flex 属性 的 效果 

















另外 ，box-direction 属性 可 以 用 来 翻转 这 4 个 盒子 的 排序 ，box-ordinal-group 可 以 用 来 改 
变 每 个 盒子 的 位 置 : 盒子 的 box-ordinal-group 属性 值 越 高 ， 就 越 排 在 后 面 。 盒 子 的 对 齐 方式 
可 以 用 box-align 和 box-pack 来 设 定 。 


11.2.11 ”过 渡 、 形 变 与 动画 


在 CSS3 中 ， 可 以 通过 transition 实现 过 渡 ， 通 过 transform 实现 形变 ， 通 过 animation 实 
现 动 画 。 
1. 过 渡 
过 渡 相 关 的 选项 主要 有 transition-property 、 transition-duration 、 transition-delay 、 
transition-timing-function， 含 义 分 别 如 下 : 
e transition-property: 用 于 指定 过 渡 的 性 质 ， 比 如 transition-property:background 是 指 
background 参与 这 个 过 渡 。 
e transition-duration: 用 于 指定 过 渡 的 持续 时 间 。 
e transition-delay: 用 于 指定 延迟 过 渡 的 时 间 。 
e transition-timing-function: 用 于 指定 过 渡 类 型 ， 有 ease, linear, ease-in, ease-out, 
ease-in-out、cubic-bezier。 
下 面 是 一 个 使 用 过 渡 的 例子 : 
«div id-"transDiv" class="transStart"> transition </div> 
-transStart { 
background-color: white; 
-webkit-transition: background-color 0.3s linear; 
-moz-transition: background-color 0.3 linear; 
-o-transition: background-color 0.3 linear; 
transition: background-color 0.3s linear; 
p 
-transEnd { 


background-color: red; 


























} 
这 里 的 id 为 transDiv， 初 始 background-color 属性 发 生变 化 时 ， 会 呈现 出 一 种 变化 效果 ， 
持续 时 间 为 0.3 秒 ,效果 为 均匀 变换 (linean)。 若 将 该 div 的 class 属性 由 transStart 改 为 transEnd, 
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背景 会 由 白 渐变 到 红 。 











形变 其 实 就 是 拉 伸 、 压 缩 、 旋 转 、 偏 移 等 一 些 图形 学 中 的 基本 变换 。 代 码 如 下 : 
„skew { 
-webkit-transform: skew(50deg): 
} 
.scale { 
-webkit-transform: scale(2, 0.5); 
} 
rotate { 
-webkit-transform: rotate(30deg); 
5 
translate ( 
-webkit-transform: translate(50px, 50px); 
i 
.all in one transform ( 
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px): 
} 
skew 是 倾斜 ，scale 是 缩放 ，rotate 是 旋转 ，translate 是 平移 。 最 后 需要 说 明 一 点 ， 形 变 
支持 综合 变换 ， 效 果 如 图 11-19 所 示 。 





Wwa scaire Tota, m 
c e 


So, 
translate s 


图 11-19 ”形变 效果 


结合 之 前 介绍 的 过 渡 ， 将 形变 和 过 渡 结 合 起 来 ， 能 产生 类 似 于 旋转 、 缩 放 等 的 效果 ， 可 
令 人 耳目 一 新 。 

3. animation 

CSS3 中 的 animation 用 于 实现 动画 效果 。 这 可 以 说 是 开辟 了 CSS 的 新 纪元 ， 使 CSS 脱 
离 了 “静止 ”这 一 约定 俗 成 的 前 提 。 以 webkit 内 核 浏览 器 为 例 ， 示 例 代码 如 下 : 

@-webkit-keyframes anim { 
096 ( 
opacity: 0: 
font-size: 12px; 
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-webkit-animation-name: anim! ; 
-webkit-animation-duration: 1.5s; 
-webkit-animation-iteration-count: 4: 
-webkit-animation-direction: alternate: 
-webkit-animation-timing-function: ease-in-out; 
} 
首先 ， 定 义 动画 的 内 容 ， 定 义 动画 animl， 变 化 方式 为 由 “透明 ”(opacity:0) 变 到 “不 透 
明 ”(opacity:1)， 同 时 ， 内 部 字体 的 大 小 由 12px 变 到 24px。 然 后 ， 定 义 动画 的 变化 参数 ， 其 
中 ，duration 表示 动画 持续 时 间 ，iteration-count 表示 动画 重复 次 数 ，direction 表示 动画 执行 完 
一 次 后 方向 的 变化 方式 (如 第 一 次 从 右 向 左 ， 第 二 次 则 从 左 向 右 )。 最 后 ，timing-function 表示 
变化 的 模式 。 
其 实 ，CSS3 动画 几乎 支持 所 有 的 变化 ， 可 以 定义 各 种 各 样 的 动画 效果 以 满足 用 户 体验 
的 需要 。 
以 上 介绍 的 CSS3 的 这 些 主要 新 特性 ， 在 Chrome 和 Safari 浏览 器 中 基本 都 是 支持 的 ， 
Firefox 只 支持 其 中 的 一 部 分 ， 下 和 Opera 支持 的 较 少 。 读 者 可 以 根据 具体 情况 选择 使 用 。 


1.3 CSS3 兼容 性 速 查 


并 不 是 所 有 的 浏览 器 都 支持 CSS3 的 特性 ， 若 想 知道 浏览 器 是 否 支 持 某 个 属性 ， 本 书 推 
荐 使 用 常用 的 CSS3 兼容 性 速 查 表 : http:/caniuse.com/。 在 搜索 框 中 输入 需要 了 解 其 兼容 性 的 
指定 的 CSS3 属性 ， 即 可 显示 该 属性 的 浏览 器 支持 列表 ， 如 图 11-20 所 示 。 
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CSS3 Text-shadow p. c« 


Method of applying one or more shadow or blur effects to text 
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图 11-20 text-shadow 属性 的 兼容 性 列表 


11.4 本 章 小 结 


过 去 Web 页 面 的 许多 视觉 效果 都 由 标记 元 素来 描述 , 直接 把 表示 页 面 结构 的 标记 与 表示 
页 面 外 观 的 标记 或 属性 混合 在 一 起 ，HTML 就 是 这 样 的 标记 语言 。 然 而 ， 之 后 出 现 的 严格 的 
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XHTML 则 不 允许 出 现 用 于 描述 外 观 的 元 素 与 属性 ， 标 记 语 言 只 用 于 描述 页 面 结构 ， 描 述 外 
观 的 工作 则 交 给 用 层 有 样式 表 (Cascading Style Sheet，CSS) 语 法 编写 的 样式 表 来 完成 。 本 章 主 
要 介绍 了 CSS 的 历史 变迁 与 使 用 方法 、CSS3 的 新 增 特 性 、CSS3 兼容 性 速 查 等 内 容 。 


11.5 思考 和 练习 


1. CSS 产生 的 原因 是 什么 ? 

2. 编写 一 个 简单 的 Hello CSS World 程序 。 
3. 简 述 CSS3 新 增 特性 。 

4. 如 何 快速 查看 CSS3 的 兼容 性 。 



































第 12 章 CSS3 选 择 器 


选择 器 是 W3C 在 CSS3 工作 草案 中 独立 设计 的 一 个 模块 。CSS1 和 CSS2 定义 了 大 部 分 
常用 的 选择 器 ， 这 些 选择 器 能 满足 设计 师 的 常规 设计 需求 。 但 是 没有 对 它们 进行 系统 化 ， 也 
没有 形成 独立 模块 ， 不 利于 扩展 。 

为 此 ，CSS3 增加 并 完善 了 选择 器 的 功能 ， 以 便 更 灵活 地 匹配 页 面 元 素 。 

本 章 学 习 目标 : 

了 解 选择 器 的 基本 概念 

掌握 属性 选择 器 的 使 用 ， 包 括 CSS2 和 CSS3 这 两 个 版 本 的 属性 选择 器 
掌握 结构 伪 类 选择 器 的 使 用 

掌握 UI 元 素 状态 伪 类 选择 器 的 使 用 


12.1 选择 器 的 用 法 


选择 器 是 CSS 中 十 分 重要 的 内 容 。 使 用 它 可 以 大 幅 提 高 开发 人 员 书写 及 修改 样式 表 时 的 
工作 效率 。 在 样式 表 中 ， 一 般 会 书写 大 量 的 代码 。 在 大 型 网 站 中 ， 样 式 表 中 的 代码 可 能 会 达 
到 几 千 行 。 麻 烦 的 是 ， 在 整个 网 站 或 Web 应 用 程序 全 部 书写 好 之 后 ， 需 要 针对 样式 表 进 行 修 
改 时 ， 在 一 大 篇 CSS 代码 中 ， 并 没有 说 明 什么 样式 服务 于 什么 元 素 ， 只 是 使 用 了 class 属性 ， 
然后 在 页 面 中 指定 了 元 素 的 class 属性 。 使 用 元 素 的 class 属性 有 两 个 缺点 : 第 一 ，class 属性 
本 身 没有 语义 ， 它 纯粹 用 来 为 CSS 样式 服务 ， 属 于 多 余 属 性 ;第 二 ， 使 用 class 属性 ， 并 没 
有 把 样式 和 元 素 绑 定 起 来 ， 针 对 同一 个 class 属性 ， 文 本 框 也 可 以 使 用 ， 下 拉 框 也 可 以 使 用 ， 
甚至 按钮 也 可 以 使 用 ， 这 是 非常 混乱 的 ， 修 改 样式 表 时 也 不 方便 。 在 CSS3 中 ， 提 倡 使 用 选 
择 器 将 样式 和 元 素 直 接 绑 定 起 来 ,这样 在 样式 表 中 什么 样式 与 什么 元 素 相 匹配 变 得 一 目 了 然 ， 
修改 起 来 也 很 方便 。 不 仅 如 此 ， 通 过 选择 器 还 可 以 实现 各 种 复杂 的 指定 ， 同 时 也 能 大 量 减少 
样式 表 的 代码 量 ， 最 终 书写 出 来 的 样式 表 也 简洁 明了 。 

使 用 选择 器 进行 样式 的 指定 时 ， 采 用 类 似 E[foo$="val"] 这 种 正则 表达 式 的 形式 。 在 样式 
中 ， 声 明 该 样式 应 用 于 什么 元 素 ， 该 元 素 的 某 个 属性 的 值 必须 是 什么 。 例 如 ， 可 以 指定 将 页 
面 中 id 为 div_big 的 div 元 素 的 背景 色 设置 为 蓝 色 ， 代 码 如 下 : 








div[id-"div big"] (background: blue:} 
这 样 ， 符 合 这 个 条 件 的 div 元 素 的 背景 色 将 被 设置 为 蓝 色 ， 不 符合 这 个 条 件 的 div 7638 
不 使 用 这 个 样式 。 





另外 ， 还 可 以 在 指定 样式 时 使 用 通配符 ^( 开 头 字符 匹配 )、?( 结 尾 字 符 匹配 )、#( 包 含 字符 
匹配 )。 例 如 指定 id 末尾 字符 为 o 的 div 元 素 的 背景 色 为 绿色 ， 代 码 如 下 : 
div[idS-"o"] (backeround: green:] 
通配符 可 以 大 大 提高 样式 表 的 书写 效率 。 











使 
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12.2 ”属性 选择 器 


fr HTML 中 ， 通 过 各 种 各 样 的 属性 ， 可 以 给 元 素 增加 很 多 附加 信息 。 例 如 ， 通 过 width 
属性 ， 可 以 指定 div 元 素 的 宽度 ; 通过 id 属性 ， 可 以 对 不 同 的 div 元 素 进行 区 分 ， 并 且 通 过 
JavaScript 来 控制 div 元 素 的 内 容 和 状态 。 


12.2.1 CSS2 定义 的 属性 选择 器 


CSS2 定义 了 以 下 4 个 属性 选择 器 : 

E[foo]: 选择 匹配 E 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 。E 选择 符 可 以 省 略 ， 表 示 选 择 
定义 了 foo 属性 的 任意 类 型 的 元 素 。 

E[foo-"bar"]: 选择 匹配 卫 的 元 素 ， 且 该 元 素 定义 foo 属性 的 值 为 bar。 

E[foo~="bar"]: 选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 的 值 是 一 个 以 空 
格 符 分 隔 的 列表 ， 其 中 一 个 列表 值 为 “bar”。 例 如 ，a[title~ 一 "bar"] 匹 配 <a title="barlbar2bar3"> 
</a>， 而 不 匹配 <a title="bar2 bar3 bar4"></a>。 

E[foo|-"en"]: 选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 的 值 是 一 个 以 连 
字符 (-) 分 隔 的 列表 ， 开 头 的 字符 为 “en”。 例如，[langF"en"] 匹 配 <body lang="en-us"><body>， 
而 不 匹配 <body lang="fr-argot"><body>。 


12:22 CSS3 定义 的 属性 选择 器 


CSS3 在 CSS2 的 基础 上 新 增加 了 3 个 属性 选择 器 , 与 已 经 定义 的 4 个 属性 选择 器 构成 强 
大 的 标签 属性 过 滤器 。 

E[foo^-"bar"]: 选择 匹配 卫 的 元 素 ， 且 该 元 素 定 义 了 foo 属性 ，foo 属性 的 值 包含 前 
级 为 “bar” 的 子 字符 串 。 例 如 ，body[lang^"en"] 匹 配 <body lang="en-us"><body>， 而 不 匹配 
<bodylang= "fr-argot"><body>。 

E[foo$-"bar"]: 选择 匹配 E 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 的 值 包含 后 绷 为 
“bar” 的 子 字 符 串 。 例 如, img[src$="jpg"] 匹 配 <img sre="picjpg" >, 而 不 下 配 <img src-"pic.gif" />。 

E[foo*-"bar"]: 选择 匹配 EE 的 元 素 ， 且 该 元 素 定义 了 foo 属性 ，foo 属性 的 值 包含 “bar” 
的 子 字符 串 。 例 如 ，img[sre*="jpg"] 丐 配 <img src-"picjpg" 户 ， 而 不 匹配 <img src-"pic.gif/ 

CSS3 遵循 通用 编码 规则 ， 选 用 ^、$ 和 * 这 3 个 通用 匹配 运算 符 ， 其 中 ^ 表 示 匹 配 起 始 符 ， 
$ 表 示 匹 配 终止 符 ，* 表 示 匹 配 任意 字符 ， 使 用 它们 更 符合 编码 习惯 和 惯用 编程 思想 。CSS3 
草案 还 保留 了 对 E[foo~="bar"] 和 E[fool="bar"] 选 择 器 的 支持 。 实 际 上 ，E[foo*="bar"] 和 
E[foo^~"bar"] 选 择 器 更 符合 用 户 使 用 习惯 ， 读 者 可 以 使 用 E[foo*="bar"] 蔡 换 E[foo~="bar"] 和 
E[fool="bar"] 选 择 器 ， 或 者 使 用 E[foo 人 ^"bar"] 选 择 器 替换 E[foo|="bar"] 选 择 器 ， 两 者 在 执行 效 
率 上 相差 不 大 。 
检测 显示 ， 新 增 的 3 个 属性 选择 器 可 以 在 实践 中 放心 使 用 ， 不 用 担心 浏览 器 兼容 问题 ， 
也 不 用 考虑 正 浏览 器 的 版 本 问题 。 
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12.2.3 ”案例 实战 


由 于 链接 文档 的 类 型 不 同 ， 链 接 文 档 的 扩展 名 也 会 不 同 。 根 据 扩展 名 的 不 同 ， 分 别 为 不 
同 链接 文档 类 型 的 超 链接 增加 不 同 的 显示 图 标 , 这 样 能 方便 浏览 者 知道 所 选择 的 超 链 接 类 型 。 
使 用 属性 选择 器 匹配 a 元 素 中 href 属性 值 的 最 后 几 个 字符 ， 即 可 为 不 同类 型 的 超 链接 添加 不 
同 的 显示 图 标 。 
【 例 12-1】 为 不 同类 型 的 超 链 接 添加 不 同 的 显示 图 标 。 
<!DOCTYPE html PUBLIC "J/W3C/DTD XHTML 1.0 Transitional/EN" "http;//www.w3.org/TR/ 
xhtmll/DTD/xhtmll-transitional.dtd"—- 


«html xmins-"http://www.w3.org/1999/xhtml"-- 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset=gb2312" /> 
<tile> 上 机 练习 </title> 
<style type="text/css"> 
pt 
margin: 4px; 




















} 
a[href^-"http:"] { 
background: url(images/window.gif) no-repeat left center; 
padding-left: 18px; 
} 
alhrefS="pdf"] { 
background: url(images/icon pdf gif) no-repeat left center; 
padding-left: 18px; 
} 
a[href$-"xls"] { 
background: url(images/icon xls.gif) no-repeat left center; 
padding-left: 18px; 
} 
a[hrefS-"ppt"] { 
background: url(images/icon ppt.gif) no-repeat left center; 
padding-left: 18px; 
} 
ahrefS-"rar'] { 
background: url(images/icon rar.gif) no-repeat left center: 
padding-left: 18px: 
ji 
a[href$="gif"] { 
background: url(images/icon img.gif) no-repeat left center; 
padding-left: 18px; 
5 
a[hrefS-"jpg"] { 
background: url(images/icon img.gif) no-repeat left center; 
padding-left: 18px: 
h 
a[hrefS-"png"] { 
background: url(images/icon img.gif) no-repeat left center; 
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padding-left: 18px: 
y 
a[hrefs-"txt"] ( 
background: url(images/icon txt.gif) no-repeat left center; 
padding-left: 18px; 
} 
</style> 
</head> 
<body> 
<p><a href="http://www.baidu.com/name.pdf">PDF 文件 </a> </p> 
<p><a href-"http://www.baidu.com/name.ppt"PPT 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.xls">XLS 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.rar">RAR 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.gif'>GIF 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.jpg">JPG 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.png">PNG 文件 </a> </p> 
<p><a href="http://www.baidu.com/name.txt">TXT 文件 </a> </p> 
<p><ahre 合 "http://www.baidu.comy/fanchor"># 锚 点 超 链接 </a><p> 
<p><a href="http://www.baidu.com/">http://www.baidu.com/</a></p> 
</body> 
<html> 
执行 以 上 代码 ， 效 果 如 图 12-1 所 示 。 


D rns x 
€ > C [O 12700.1:8020/ch12/index html 





图 12-1 使 用 属性 选择 器 设计 不 同 的 超 链接 图 标 样式 


如 果 不 想 借助 CSS3 中 这 些 新 添加 的 属性 选择 器 ， 用 户 可 以 使 用 脚本 来 实现 ， 但 会 比较 
麻烦 ， 代 码 如 下 : 

<script type-"text/javascript" src-"images/jquery.js"—/script^ 

«script type-"text/javascript'- 

S(functionQ( 
S("a[brefS-pdf]") addClass("pdf"): 
$("a[href$=xls]").addClass("xls"); 
S("a[hrefS-ppt]").addClass("ppt"); 
S("a[href$-rar]").addClass("rar"); 
S("a[hrefS-gif]").addClass("img"); 
S("a[hrefS-jpg]").addClass("img"): 
S("a[hrefS-png]").addClass("img"); 
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S("a[href$-txt]").addClass("txt"): 
S("a:not([href*-http://www. ])").not("[href^—]") 
-addClass("external") 
Ţattr({ target: " blank" }); 
3x 
</script> 


12.3 ”结构 伪 类 选择 器 


结构 伪 类 选择 器 是 CSS3 新 增 的 类 型 选择 器 ， 它 们 利用 DOM 树 实现 元 素 过 滤 ， 通 过 文 
档 结构 的 相互 关系 来 匹配 元 素 ， 可 以 减少 class 和 id 属性 的 定义 ， 使 文档 变 得 更 加 简洁 。 


12.3.1 CSS 中 的 伪 类 选择 器 及 伪 元 素 


在 学 习 结构 伪 类 选择 器 之 前 ， 先 了 解 两 个 概念 ， 即 CSS 中 的 伪 类 选择 器 和 伪 元 素 : 
e 伪 类 选择 器 : CSS 中 已 经 定义 好 的 选择 器 ， 不 能 随便 取 名 。 常 用 的 伪 类 选择 器 是 用 
在 a 元 素 上 的 几 种 选择 器 ， 如 a:linkla:visitedla:hoverla:active。 
e 伪 元 素 选择 器 : 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ， 而 是 针对 CSS 中 已 经 定义 好 
的 伪 元 素 使 用 的 选择 器 。CSS 中 有 如 下 4 种 伪 元 素 选择 器 : 
> first-line: 为 某 个 元 素 的 第 一 行文 字 使 用 样式 。 
> first-letter: 为 某 个 元 素 中 文字 的 首 字母 或 第 一 个 字母 使 用 样式 。 
> before: 在 某 个 元 素 之 前 插入 一 些 内 容 。 
» after: 在 某 个 元 素 之 后 插入 一 些 内 容 。 
使 用 方法 如 下 : 
选择 器 : 伪 元 素 { 样 式 } 
例如 : 
p:first-line( color:#ff0000;} 
后 续 会 详细 介绍 伪 类 选择 器 的 具体 使 用 方法 ， 本 节 主 要 介绍 以 下 4 种 结构 伪 类 选择 器 : 
e 四 个 最 基本 的 结构 伪 类 选择 器 : root、not、empty、target 
e fistchild, last-child 、 nth-child 、 nth-last-child 、 nth-child(odd) 、 nth-child(even) 、 
nth-last-child(odd)、nth-last-child(even) 
e nth-of-type 和 nth-last-of-type 
e only-child 
结构 伪 类 选择 器 的 公共 特征 是 允许 开发 者 根据 文档 结构 来 指定 元 素 的 样式 。 


12.3.2 root、not、empty 和 target 














1. root、not 

root 将 样式 绑 定 到 页 面 的 根 元 素 。 所 谓 根 元 素 ， 是 指 位 于 文档 树 中 最 顶层 结构 的 元 素 ， 
在 HIML 页 面 中 是 指 包 含 整个 页 面 的 <html> 部 分 。 

要 想 对 某 个 结构 元 素 使 用 样式 ， 但 想 排除 这 个 结构 元 素 下 的 子 结构 元 素 ， 可 以 使 用 not 
样式 。 
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【 例 12-2】 使 用 root 和 not 结构 伪 类 选择 器 。 
例如 ， 有 以 下 HTML 代码 : 
«div id=-"header> 页 头 <,div 
<div id="page'"> 页 体 </div> 
«div id="footer"> 页 脚 </div> 
对 以 上 页 面 元 素 使 用 如 下 样式 表 : 
div{ 
padding: 10px 20px: 
min-height: 50px; 
} 
div:not([id="footer"]){ 
background: pink; 
» 
运行 代码 ， 效 果 如 图 12-2 所 示 。 








页 头 
页 体 


页 脚 
图 12-2 使 用 root 和 not 选 择 器 的 效果 


2. empty 
empty 用 来 选择 没有 任何 内 容 的 元 素 ， 这 里 没有 内 容 指 的 是 一 点 内 容 都 没有 ， 哪 怕 是 一 
个 空格 都 不 行 。 例 如 ， 文 档 中 有 3 个 段落 元 素 p， 要 把 没有 任何 内 容 的 p 元 素 隐藏 起 来 ， 可 
以 使 用 empty 选择 器 来 控制 。 
例如 ， 有 以 下 HTML 代码 : 
<p> 我 是 一 个 段落 </p> 
<p> d 
pep 
对 以 上 HTML 元 素 使 用 empty 选择 器 进行 样式 控制 ， 代 码 如 下 : 
pt 
background: orange; 
min-height: 30px: 
} 
p:empty { 
display: none; 


3 
运行 代码 ， 效 果 如 图 12-3 所 示 。 
3. target 
target 选择 器 又 称 为 目标 选择 器 ， 用 来 匹配 文档 (页 
面 )URL 的 某 个 标志 符 的 目标 元 素 。target 选择 器 为 页 面 


_ 图 12-3 (EH empty 选择 器 的 效果 
中 的 某 个 target 元 素 指定 样式 , 该 样式 只 在 用 户 单 击 了 页 
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面 中 的 链接 ， 并 且 跳 转 到 target 元 素 后 生效 。 
例如 ， 使 用 target 选择 器 控制 样式 ， 单 击 链接 以 显示 隐藏 的 段 洲 。 首 先 设计 HTML 代码 如 
F: 




















<h2><a href="#brand">Brand</a></h2> 
<div class="menuSection" id="brand"> 





content for Brand 
</div> 
CSS 代码 如 下 : 
.menuSection{ 
} naa Brand 4 一 单 击 链接 
Se 就 是 d="brand" 的 div x1 e*/ pn ERAN 
y:block; 
à 图 12-4 使 用 target 选择 器 的 效果 


运行 程序 ， 效 果 如 图 12-4 所 示 。 
12.3.3 first-child、last-child、nth-child(n) 和 nth-last-child(n) 


1. first-child 和 last-child 
first-child 选择 器 用 来 选择 第 一 个 子 元 素 (所 有 的 第 一 个 子 元 素 都 会 被 选择 )。 例 如 ， 有 以 
F HTML 代码 : 
<body> 
<div id="selector1"> 
<span> 我 是 第 一 个 span</span> 
<p> 我 是 第 一 个 p， 在 span 后 面 <p> 
<div><p> 第 二 个 p</p></div> 
<p> 第 三 个 p</p> 
<p> 第 四 个 p</p> 
<em>Iam em</em> 
<p>iewnvk</p> 
<ul> 
<i>l</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<i>5</li> 
<l> 
</div> 
</body> 
这 里 作为 selectorl 的 第 一 个 子 元 素 的 有 span 7625. div 标签 里 的 p 7635 EU ul 标签 里 
第 一 个 元素。 为 以 上 HTML 元 素 设计 如 下 样式 : 
#selector1 :first-child{ 
color: pink; 


5 











} 
运行 效果 如 图 12-5 所 示 。 
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需要 注意 的 是 ，first-child 的 冒号 与 前 面 的 元 素 间 要 有 
一 个 空格 的 距离 ， 否 则 会 把 父 元 素 里 的 所 有 子 元 素 都 选 上 。 

last-child 选择 最 后 一 个 子 元 素 ， 其 各 种 变化 和 
first-child 一 样 ， 这 里 不 再 举例 说 明 。 

2. nth-child(n) 和 nth-last-child(n) 


nth-child(n) 用 来 定位 父 元 素 的 一 个 或 多 个 特定 的 子 
元 素 。 其 中 “n” 是 参数 ， 可 以 是 整数 值 (1、2、3、4 等 )， 
也 可 以 是 表达 式 (2n+1、-n+s 等 ) 和 关键 词 (odd、even 等 )， 
参数 n 的 起 始 值 始终 是 1。 也 就 是 说 , 参数 n 的 值 为 0 时 ， ”图 12-5 
选择 器 将 选择 不 到 任何 匹配 的 元 素 。 

e irnth-child2n-1): 匹配 奇数 行 的 tro 
tr:nth-child(2n): 匹配 偶数 行 的 tr。 
trnth-child(odd): 匹配 奇数 行 的 tr。 
trnth-child(even): 匹配 偶数 行 的 tro 
tenth-child(4): 匹配 第 四 行 的 tr。 
例如 ， 有 以 下 HTML 代码 : 


设计 CSS 代码 如 下 : 
ol > linth-child(2n-1){ 
background: pink: 


} 
运行 代码 ， 效 果 如 图 12-6 所 示 。 


号 op mo 
eme gem e E =- 
SESBSBS 
BESELEBS 


. itenlü 
12-6 ”使 用 nth-child 选择 器 的 效果 


m 


使 
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nth-last-child(n) 选 择 器 用 于 选择 父 元 素 中 倒数 第 n 个 位 置 的 元 素 或 特定 元 素 ， 计 算 顺 序 
与 nth-child 不 同 ， 其 余 用 法 相同 ， 在 此 不 再 举例 说 明 ， 读 者 可 自行 对 上 面 的 程序 修改 并 观察 
效果 。 


12.34 first-of-type 和 last-of-type 
































first-of-type 选择 器 类 似 于 first-child 选择 器 ， 不 同 之 处 在 于 指定 元 素 的 类 型 ， 主 要 用 来 定 
位 父 元 素 下 的 某 个 类 型 的 第 一 个 子 元 素 。first-of-type 选择 器 的 功能 类 似 于 nth-of-type 选择 器 。 
例如 ， 有 以 下 HTML 代码 : 
<body> 
«div class="wrapper"> 
<p> 我 是 第 一 个 段落 </p> 
<p> 我 是 第 二 个 段落 </p> 
<div> 我 是 第 一 个 Div 元 素 </div> 
<div> 我 是 第 二 个 Div 元 素 </div> 
<p> 我 是 第 三 个 段落 </p> 
<p> 我 是 第 四 个 段落 </p> 
<div> 我 是 第 三 个 Div 元 素 </div> 
<div> 我 是 第 四 个 Div 元 素 </div> 
</div> 
</body> 
应 用 如 下 CSS 样式 : 
-Wrapper > p, 
- wrapper > div { 
margin: 10px 0; 
background:#89c3eb; 
color: #fff: 
padding: 5px; 
} 











.wrapper > div:first-of-type { 
background: #928178: 


} 
运行 程序 ， 效 果 如 图 12-7 所 示 。 


我 是 第 三 个 Div 元 素 


图 12-7 使 用 first-oftype 选择 器 的 效果 
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last-of-type 选择 器 和 first-of-type 选 


择 器 的 功能 是 一 样 的 ,不 同 之 处 在 于 选择 的 是 父 元 素 


下 某 个 类 型 的 最 后 一 个 子 元 素 。 这 里 不 再 歼 述 ， 读 者 可 自行 在 上 述 代 码 的 基础 上 进行 修改 ， 


观察 效果 。 





12.3.5 nth-of-type(n) 和 nth-last-of-type(n) 


nth-of-type(n) 选 择 器 和 nth-child(n) 选 择 器 非常 类 似 ， 不 同 之 处 在 于 只 计算 父 元 素 中 指定 


的 某 种 类 型 的 子 元 素 。 当 某 个 元 素 











Ph 的 子 元 素 不 单 是 同一 种 类 型 的 子 元 素 时 ， 使 / 











nth-of-type(n) 选 择 器 来 定位 父 元 素 中 某 种 类 型 的 子 元 素 是 非常 方便 和 有 用 的 。nth-of-type(n) 
选择 器 中 的 “n” 和 “nth-child(n)” 选 择 器 中 的 “n” 一 样 ， 可 以 是 具体 的 整数 ， 也 可 以 是 表 


达 式 ， 还 可 以 是 关键 词 。 


下 面 来 演示 以 下 所 有 匹配 的 子 元 素 被 分 离 出 来 单独 排序 ， 不 匹配 的 不 参与 排序 。HIML 


代码 如 下 : 
<body> 
«div class="wrapper"> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 元 素 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 


<div> 我 是 一 个 Div 元 素 </div> 


<p> 我 是 一 个 段落 </p> 
</div> 
</body> 


为 上 述 HTML 代码 使 用 如 下 CSS 样式 : 


.wrapper > div:nth-of-type(odd), 
.wrapper > p:nth-of-type(even){ 
background: #59b9c6; 


j 
运行 程序 ， 效 果 如 图 12-8 所 示 。 


nth-last-of-type(n) 选 择 器 和 nth-of-type(m) 选 择 器 一 样 , 选择 父 元 素 中 指定 的 某 种 子 元 素 类 
型 ， 但 起 始 方向 是 从 最 后 一 个 子 元 素 开始 ， 而 且 使 用 方法 与 nth-last-child(n) 选 择 器 一 样 ， 因 
此 不 再 举例 说 明 ， 读 者 可 自行 在 以 上 代码 的 基础 上 加 以 修改 ， 观 察 效 果 。 
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我 是 一 个 段落 元 素 
我 是 一 个 Div 元 素 


我 是 一 个 段落 
我 是 一 个 Div 元 素 


我 是 一 个 段落 
我 是 一 个 Div 元 素 


我 是 一 个 段落 
我 是 一 个 Div 元 素 





图 12-8 ”使 用 nth-of-type(n) 选 择 器 的 效果 


12.3.6 only-child 选择 器 

在 only-child 选择 器 匹配 的 元 素 的 父 元 素 中 有 且 仅 有 一 个 子 元 素 。 例 如 ，E:only-child 选 
择 的 是 这 个 下 元素 ， 也 就 是 子 元 素 。 

例如 ， 有 以 下 HTML 代码 : 


为 以 上 HTML 元 素 设置 如 下 样式 : 
lit 
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3 
li:only-child ( 
background: #a99e93; 
Bi 
运行 以 上 程序 ， 效 果 如 图 12-9 所 示 。 






图 12-9 使 用 only-child 选择 器 的 效果 


12.4 ”UI 元 素 状态 伪 类 选择 器 


在 CSS3 选择 器 中 , 除了 结构 伪 类 选择 器 之 外 ,还 有 一 种 UI 元 素 状态 伪 类 选择 器 ,这些 
选择 器 的 共同 特征 是 ， 指定 的 样式 只 在 元 素 处 于 某 种 状态 时 才 起 作用 ， 在 默认 状态 下 不 起 作 
Ho UI 元素 状态 伪 类 选择 器 也 是 CSS3 选择 器 模块 组 中 的 一 部 分 ， 主 要 用 于 表单 元 素 ， 以 提 
高 网 页 的 人 机 交互 能 力 、 操 作风 辑 以 及 页 面 的 整体 美观 程度 ， 使 表单 页 面 更 具 个 性 与 品位 ， 
使 用 户 操作 页 面 表 单 更 加 便利 和 简单 。 


12.4.1 UI 元 素 状态 伪 类 选择 器 的 语法 


UI 元 素 的 状态 一 般 包 括 : 启用 、 禁 用 、 选 中 、 未 选中、 获得 焦点 、 失 去 焦点 、 锁 定 和 待 
机 等 。 在 HTML 元 素 中 有 可 用 和 不 可 用 状态 ， 例 如 表单 中 的 文本 输入 框 ， 在 HTML 元 素 中 
还 有 选中 和 未 选中 状态 ， 例 如 表单 中 的 复 选 框 和 单 选 按钮 。 这 几 种 状态 都 是 CSS3 选择 器 中 
常用 的 状态 伪 类 选择 器 ， 详 细 说 明 如 表 12-1 所 示 。 


表 12-1_UI 元 素 状态 伪 选 择 器 的 语法 





选择 器 功能 描述 
Echecked 还 中 状态 仍 关 选择 咒 TERR PE E E 
Eenabled 启用 状态 仿 关 选择 器 殉 本 所 有 启用 的 表单 元 素 


E:disabled 禁用 状态 伪 类 选择 器 匹配 所 有 禁用 的 表单 元 素 


在 CSS3 中 共有 11 种 UI 元 素 伪 类 选择 器 , 分 别 为 : E:hover、 E:active、 E:focus、 E:enabled、 
E:disabled、E:read-only、E:read-write、E:checked、E::selection、E:default、E:indeterminate 。 
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这 些 UI 元 素 伪 类 选择 器 的 作用 分 别 如 下 : 
© Ebhover 选择 器 用 来 指定 当 鼠 标 指针 移动 到 元 素 上 时 元 素 所 使 用 的 样式 。 
e Eactive 选择 器 用 来 指定 元 素 被 激活 时 (鼠标 在 元 素 上 按 下 还 没有 松 开 时 ) 使 用 的 样式 。 
e E:focus 选择 器 用 来 指定 当 元 素 获得 焦点 时 使 用 的 样式 ， 主 要 在 文本 框 控件 获得 焦点 
并 进行 文字 输入 时 使 用 。 
e E:enabled 选择 器 用 来 指定 当 元 素 处 于 可 用 状态 时 的 样式 
e E:disabled 选择 器 用 来 指定 当 元 素 处 于 不 可 用 状态 时 的 样式 
e E:read-only 选择 器 用 来 指定 当 元 素 处 于 只 读 状 态 时 的 样式 ， 在 Firefox 下 需要 写成 


-moz-read-only 的 形式 。 
© E:read-write 选 择 器 用 来 指定 当 元 素 处 于 非 只 读 状 态 时 的 样式 ， 在 Firefox 下 需要 写成 
-moz-read-write 的 形式 。 


© E:hecked 选择 器 用 来 指定 当 表单 中 的 单 选 按 钮 或 复 选 框 处 于 选中 状态 时 的 样式 ， 在 
Firefox 下 需要 写成 -noz-checked 的 形式 。 

e E:default 选择 器 用 来 指定 当 页 面 打 开 时 默认 处 于 选中 状态 的 单 选 按钮 或 复 选 框 的 样 
式 。 需 要 注意 的 是 ， 即 使 用 户 将 默认 设 定 为 选中 状态 的 单 选 按钮 或 复 选 框 修改 为 非 
选中 状态 ， 使 用 E:default 选择 器 设 定 的 样式 也 依然 有 效 。 

e Eindeterminate 选择 器 用 来 指定 当 页 面 打开 时 ， 如 果 一 组 单 选 按钮 中 的 任何 一 个 单 选 
按钮 都 没有 被 设 定 为 选中 状态 时 整 组 单 选 按钮 的 样式 。 如 果 用 户 选中 这 组 单 选 按钮 
中 的 任何 一 个 单 选 按钮 ， 那 么 整 组 单 选 按钮 的 样式 将 被 取消 。 

e E:selection 选择 器 用 来 指定 当 元 素 处 于 选中 状态 时 的 样式 。 这 里 需要 注意 的 是 : 在 
Firefox 下 使 用 时 ， 需 要 写成 -noz-selection 的 形式 。 














12.4.23 E:hover,. E:active 和 E:focus 
E:hover 选择 器 被 用 来 指定 当 鼠 标 指 针 移 动 到 元 素 上 时 元 素 所 使 用 的 样式 ， 使 用 方法 如 下 ; 
< 元 素 >:hover{ 
Css 样式 


} 
可 以 在 “< 元 素 >” 中 添加 元 素 的 type 属性 ， 例 如 : 





input[type="text"]:hover{ 
CSS 样式 
H 
E:active 选择 器 被 用 来 指定 元 素 被 激活 时 使 用 的 样式 。E:focus 选择 器 被 用 来 指定 元 素 获 
得 光标 聚焦 点 使 用 的 样式 ， 主 要 在 文本 框 控件 获得 聚焦 点 并 进行 文字 输入 时 使 用 。 
例如 ， 有 以 下 HIML 代码 : 
<form> 
姓名 : <input type="text" placeholder=" 请 输入 姓名 "> 
<br/> 
<br/> 
密码 : <input type="password" placeholder=" 请 输入 密码 "> 
</form> 


为 这 个 表单 设计 以 下 CSS 样式 : 
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<style> 

input[type-"text"]:hover( 
background: green; 

) 

input[type-"text"]:focust 
background: #ff6600; 
color: 2fff. 

b 

input[type-"text"]:active( 
background: blue; 

ji 

input[type="password"]:hover{ 
background: red; 

} 

</style> 
运行 以 上 程序 , 效果 如 图 12-10 所 示 , 页 面 根据 鼠标 对 文本 框 的 操作 类 型 显示 不 同 的 颜色 。 


cz NENNEN 
en EE 


图 12-10 fE] hover, active 和 focus 选择 器 的 效果 


12.4.3 E:enabled 5 E:disabled 


E:enabled 选择 器 被 用 来 指定 当 元 素 处 于 可 用 状态 时 的 样式 。E:disabled 选择 器 被 用 来 指 
定 当 元 素 处 于 不 可 用 状态 时 的 样式 。 例 如 ， 为 12.4.2 节 中 的 HTML 代码 添加 如 下 CSS 样式 : 
<style> 
input[type="text"]:enabled{ 
background: green: 
color: Zffffff: 
) 
input[type-"text"]:disabled 
background: 4727272; 
} 
</style> 
运行 程序 ， 效 果 如 图 12-11 所 示 。 
Ld 
SO: BERN 
图 12-11 使 用 enabled 和 disabled 选择 器 的 效果 


12.4.4 E:read-only 与 E:read-write 

















E:read-only 选择 器 被 用 来 指定 当 元 素 处 于 只 读 状 态 时 的 样式 ; E:read-write 选择 器 被 用 来 
指定 当 元 素 处 于 非 只 读 状态 时 的 样式 。 
例如 ， 有 以 下 HTML 代码 : 
«fom 
姓名 : <input type="text" placeholder=" 请 输入 姓名 " value-"winson" readonly> 
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<br> 
<br> 
学 校 : <input type="text" placeholder=" 请 输入 学 校 "> 
</form> 
对 以 上 HTML 代码 添加 以 下 CSS 样式 : 
<style> 
input[type="text"]read-only{ 
background: #000; 
color: green; 
) 
input[type-"text"]:read-write ( 
color: #ff6600; 
b 
</style> 
运行 程序 ， 效 果 如 图 12-12 所 示 。 


ct NENNEN 
8: pus 


图 12-12 使 用 read-only 和 read-write 选择 器 的 效果 
12.4.5 E:checked. E:default 和 E:indeterminate 


1. E:checked 伪 类 选择 器 
E:checked 伪 类 选择 器 用 来 指定 当 表 单 中 的 单 选 按钮 或 复 选 框 处 于 选中 状态 时 的 样式 。 
例如 ， 有 以 下 HTML 代码 : 
<form> 
房屋 状态 : 
<input type="checkbox"> 水 
<input type-"checkbox"- rti 
<input type-"checkbox" A^ 
<input type="checkbox"> 宽 带 
</form> 
为 以 上 HTML 元 素 添加 以 下 CSS 样式 : 
<style> 
input[type="checkbox"]:checked{ 
outline: 2px solid green; 
D 
</style> 
运行 以 上 程序 ， 效 果 如 图 12-13 所 示 。 


房屋 状态 : Dx DA 日 天 然 气 UA 
图 12-13 ”使 用 checked 选择 器 的 效果 


2. E:default 选择 器 
E:default 选择 器 用 来 指定 当 页 面 打 开 时 默认 处 于 选中 状态 的 单 选 按 钮 或 复 选 框 控件 的 样 
式 。 将 以 上 样式 表 改 成 默认 样式 ， 代 码 如 下 : 
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input[type="checkbox"]:default{ 
outline: 2px solid green: 
} 
程序 运行 效果 如 图 12-14 所 示 。 
3. E:indeterminate 选择 器 


E:indeterminate 选择 器 用 来 指定 当 页 面 打 开 时 ， 一 组 单 选 按钮 中 没有 任何 一 个 单 选 按钮 
被 设 定 为 选中 状态 时 整 组 单 选 按钮 的 样式 。 
例如 ， 设 计 以 下 HTML 代码 : 
<form> 
性 别 : 
<input type="radio"> 男 
<input type="radio"> 女 
</form> 
为 这 个 表单 设计 如 下 CSS FEX: 


<style> 





input[type="radio"]:indeterminate{ 
outline: 2px solid green; 
j 
</style> 
运行 以 上 程序 ， 效 果 如 图 12-15 所 示 。 


房屋 状态 : a 目 天 然 气 ORE Es): 回 男 回 女 
图 12-14 ”使 用 default 选择 器 的 效果 图 12-15 使 用 indeterminate 选择 器 的 效果 


12.4.6 E:selection 


E:selection 选择 器 用 来 指定 当 元 素 处 于 选中 状态 时 的 样式 。 例 如 : 
head lang="en"> 
«meta charset="UTF-8"> 
<title> 伪 类 选择 器 E::selection</title> 
<style> 
:Selection{ 
background: green: 
color: Zffffff; 
5 
input[type-"text"]::selectiont 


<hl> 伪 类 选择 器 E::selection-/h1^ 

<p> 今 天 ， 开 发 搜索 框 ， 出 现 了 bug， 现 在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 ， 出 现 了 bug， 现 在 没 
有 找到 原因 ! 今天 ， 开 发 搜索 框 ， 出 现 了 bug， 现 在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 ， 出 现 了 bug, 
现在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 ， 出 现 了 bug， 现 在 没有 找到 原因 ! <p> 
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<input type="text" placeholder=" 文 本 "> 
</body> 
运行 以 上 程序 ， 效 果 如 图 12-16 所 示 。 


D sRE:selection x W 3 
€ > C |O 12700.1:020/ch12/ui-7.html?. | 


伪 类 选择 器 E::selection 


今天 ,开发 搜索 框 ， 出 现 了 bug ,现在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 ,出现 了 bug ， 

现在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 ,出 现 了 bug ,现在 没有 找到 原因 ! 今天 ， 开 发 搜 
索 框 ,出现 了 bug ,现在 没有 找到 原因 ! 今天 ， 开 发 搜索 框 , 出现 了 bug ,现在 没有 找到 
原因 ! 





图 12-16 使 用 selection 选择 器 的 效果 


124.7 E:invalid 5 E:valid 


E:valid 伪 类 选择 器 的 作用 和 Ezinvalid 恰好 相反 , 用 来 指定 当 元 素 中 输入 的 内 容 通过 所 指 
定 的 检查 ， 或 元 素 内 容 符 合 元 素 规定 的 格式 时 的 样式 。 例 如 ， 当 在 密码 杠 中 输入 的 密码 正确 
时 ， 在 文本 框 右 侧 显示 绿色 的 \ 标 记 。 

例如 ， 以 下 是 使 用 这 两 个 选择 器 的 页 面 : 

«IDOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>E:invalid 伪 类 选择 器 与 E:valid 伪 类 选择 器 </tile> 
<style> 
input[type="email"]:invalid{ 
color: red; 
} 
input[type="email"]:valid{ 
color: green; 
} 
</style> 
</head> 
<body> 
<hl>E:invalid 伪 类 选择 器 与 E:valid 伪 类 选择 器 <hl> 
<form> 
<input type="email" placeholder=" 请 输入 E-mail" 
</form> 
</body> 
</html> 
运行 以 上 程序 ， 效 果 如 图 12-17 所 示 。 
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E:invalid 伪 类 选择 器 与 


E:valid 伪 类 选择 器 


入 E-mail 





图 12-17 使 用 invalid 和 valid 选择 器 的 效果 


12.4.8 E:required 与 E:optional 


E:required 选择 器 用 来 指定 允许 使 用 required 属性 ， 而 且 已 经 指定 required 属性 的 input 
元 素 、select 元 素 以 及 textarea 元 素 的 样式 。 

E:optional 选择 器 用 来 指定 允许 使 用 required 属性 ， 但 是 未 指定 required 属性 的 input 元 
3&. select 元 素 以 及 textarea 元 素 的 样式 。 

例如 ， 有 以 下 HTML 代码 ;: 


<form> 
姓名 : <input type="text" placeholder=" 请 输入 姓名 " required 
<br/> 
<br/> 
学 校 : <input type="text" placeholder=" 请 输入 学 校 "> 
</form> 
为 这 些 HTML 代码 使 用 如 下 样式 : 
<style> 
input[type-"text" required t 
background: red; 
color: £ffffff. 
} 
input[type="text"]:optional{ 
background: green; 
color: 2ffffff 
5 
</style> 


运行 以 上 程序 ， 效 果 如 图 12-18 所 示 。 


E © [O 12704.15020/ch12/ui-9.htmE 


E:required 伪 类 选择 器 与 


E:optional 伪 类 选择 器 





图 12-18 ”使 用 required 和 optional 选择 器 的 效果 
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12.4.9 E:in-range 5 E:out-of-range 























E:in-range 选择 器 用 来 指定 当 元 素 的 有 效 值 被 限定 在 一 段 范围 之 内 ， 且 实际 的 输入 值 在 
该 范围 之 内 时 的 样式 。 
E:out-of-range 选择 器 用 来 指定 当 元 素 的 有 效 值 被 限定 在 一 段 范围 之 内 , 但 实际 的 输入 值 
超出 该 范围 时 使 用 的 样式 。 
jin, ALAF HTML 代码 : 
<hl>E:in-range 伪 类 选择 器 与 Ezout-of-range 伪 类 选择 器 </h1> 
<input type="number" min="0" max-"100" value="0"> 
添加 如 下 CSS 样式 : 
<style> 
input[type="number"]:in-range{ 
color: Zffffff. 
background: green; 
UCET E 
background: red; 
color: Zffffff 
d 
运行 以 上 程序 ， 效 果 如 图 12-19 所 示 。 


















































E:in-range 伪 类 选择 器 与 


E:out-of-range 伪 类 选择 器 





图 12-19 使 用 in-range 和 out-of-range 选择 器 的 效果 


12.5 ”本章 小 结 


选择 器 是 CSS 中 十 分 重要 的 内 容 。 使 用 它 可 以 大 幅 提 高 开发 人 员 书 写 及 修改 样式 表 时 的 
工作 效率 。 选 择 器 同时 也 是 W3C 在 CSS3 工作 草案 中 独立 设计 的 一 个 模块 ，CSS1 和 CSS2 
定义 了 大 部 分 常用 的 选择 器 ， 但 它们 没有 形成 独立 模块 ， 不 利于 扩展 。 

在 大 型 网 站 中 , CSS 样式 表 中 的 代码 可 能 会 达到 几 千 行 。 过 去 的 CSS 版 本 只 是 为 元 素 指 
定 class 等 属性 ， 但 是 使 用 元 素 的 class 属性 有 两 个 缺点 : 第 一 ，class 属性 本 身 没有 语义 ， 它 
纯粹 用 来 为 CSS 样式 服务 ， 属 于 多 余 属 性 ;第 二 ， 使 用 class 属性 ， 并 没有 把 样式 和 元 素 绑 
定 起 来 ， 针 对 同一 个 class 属性 ， 文 本 框 也 可 以 使 用 ， 下 拉 框 也 可 以 使 用 ， 甚 至 按钮 也 可 以 使 
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用 ， 这 是 非常 混乱 的 ， 修 改 样式 表 时 也 不 方便 。 
本 章 对 CSS3 新 增 的 属性 进行 了 系统 介绍 ， 包 括 选择 器 的 概念 、 常 用 的 属性 选择 器 、 结 


12.0 思考 和 练习 


1. 为 什么 要 在 CSS 技术 中 使 用 选择 器 ? 

2. 简 述 CSS3 新 增 的 属性 选择 器 。 

3. 写 一 个 HTML 页 面 ， 在 页 面 上 列 出 不 同 的 电脑 品牌 名 ， 为 这 些 电 脑 品 牌 名 添加 不 同 
的 LOGO。 

4. 常见 的 结构 伪 类 选择 器 有 哪些 ?作用 分 别 是 什么 ? 

5. 常见 的 UI 元 素 状态 伪 类 选择 器 有 哪些 ? 作用 分 别 是 什么 ? 
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在 文本 样式 控制 方面 ，CSS3 新 增 了 几 个 文本 属性 ， 同 时 完善 了 颜色 控制 ， 实 现 了 对 不 透明 
效果 的 支持 。 可 以 说 ， 对 颜色 的 不 透明 度 支持 是 CSS3 革新 的 最 大 亮点 。CSS3 定义 了 功能 强大 
的 文本 属性 ， 例 如 : 用 于 控制 文本 阴影 或 模糊 效果 的 text-shadow 属性 ， 用 于 控制 省 略 文本 的 
处 理 方式 的 text-overflow 属性 ; 用 于 控制 文本 超过 指定 容器 的 边界 时 是 否 断 开 转 行 的 word-wrap 
属性 。 

另外 ，CSS3 增强 了 颜色 功能 。 例 如 : HSL 颜色 表示 方式 通过 对 色调 (ED)、 饱 和 度 (S) 和 亮 
度 (L)3 个 颜色 通道 的 变化 以 及 它们 相互 之 间 的 又 加 来 表示 各 式 各 样 的 颜色 ;HSLA 颜色 表示 
方式 则 在 HSL 颜色 表示 方式 的 基础 上 增加 了 透明 度 (A) 设 置 。 


本 章 学 习 目标 : 
e 掌握 设置 文本 阴影 的 text-shadow 属性 的 用 法 , 能 够 使 用 该 属性 设置 文本 阴影 的 位 移 、 
模糊 和 半径 等 


e 掌握 文本 样式 的 设置 方法 ， 包 括 文本 溢出 、 文 本 换行 、 粗 斜体 等 

e 掌握 常用 颜色 值 的 用 法 ， 包 括 RGBA、HSL、HSLA 颜色 值 ， 以 及 opacity 属性 的 设 
置 ， 定 义 transparent 颜色 值 的 方法 等 

e 了 解 CSS3 中 字体 兼容 性 处 理 的 常用 方法 


13.1 CSS3 文本 属性 概述 


本 章 主要 介绍 CSS3 的 各 种 文本 属性 。 CSS3 增加 了 丰富 的 文本 修饰 效果 , 使 得 网 页 更 加 
美观 舒适 。 下 面 列 出 了 常用 的 CSS3 文本 属性 ， 如 表 13-1 所 示 。 


表 13-1 常用 CSS3 文本 属性 











属性 说 明 
text-shadow 文字 阴影 
text-stroke 文字 描 边 
text-overflow 文本 溢出 处 理 
word-wrap 长 单词 或 URL 强制 换行 
@font-face 嵌入 服务 器 字体 
font-size-adjust 调整 字体 尺寸 








接 下 来 一 一 详细 介绍 CSS3 新 增 的 这 些 文本 属性 。 


132 设计 文本 阴影 


在 CSS3 中 ， 可 以 使 用 text-shadow 属性 给 页 面 上 的 文字 添加 阴影 效果 ， 到 目前 为 止 ， 
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Safari, Firefox, Chrome 和 Opera 等 主流 浏览 器 都 支持 该 功能 。text-shadow 属性 是 在 CSS2 
中 定义 的 ， 在 CSS 2.1 中 被 删除 了 ， 在 CSS3 中 又 得 以 启用 。 








13.2.1 text-shadow 属性 的 使 用 方法 


在 CSS2 中 ， 如 果 想 要 实现 文字 的 阴影 效果 ， 一 般 都 是 使 用 Photoshop 等 工具 来 实现 。 
但 是 在 CSS3 中 ， 这 种 效果 用 text-shadow 属性 就 能 实现 了 。 语 法 如 下 : 


text-shadow:x-offset y-offset blur color; 
其 中 各 参数 作用 如 下 : 














e x-offset: 水 平 了 明 影 表示 阴影 的 水 平 偏 移 距离 ， 单 位 可 以 是 px、em 或 百分比 等 。 如 


果 值 为 正 ， 则 阴影 向 右 偏 移 ， 如 果 值 为 负 ， 则 阴影 向 左 偏 移 。 


e y-offset: 垂直 阴影 ， 表 示 阴 影 的 垂直 偏 移 距离 ， 单 位 可 以 是 px、em 或 百分比 等 。 如 





果 值 为 正 ， 则 阴影 向 下 偏 移 ， 如 果 值 为 负 ， 则 阴影 向 上 偏 移 。 


e blur: 模糊 距离 ， 表 示 阴 影 的 模糊 程度 ， 单 位 可 以 是 px、em 或 百分比 等 。Blur 参数 
的 值 不 能 为 负 。 值 越 大 ， 阴 影 越 模糊 ， 值 越 小 ， 阴 影 越 清晰 。 当 然 ， 如 果 不 需 要 阴 


影 模糊 效果 ， 可 以 把 blur 参数 的 值 设 置 为 0。 
e color: 表示 阴影 的 颜色 。 


13.2.2 “一般 文字 阴影 效果 


下 面 通过 一 个 文字 阴影 示例 来 讲解 text-shadow 属性 的 使 用 。 
【 例 13-1】 使 用 text-shadow 属性 制作 一 般 文字 阴影 效果 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 text-shadow 属性 </title> 
<style type="text/css"> 
#ivy 
{ 
font-size:40px; 
text-shadow:4px 4px 2px gray; 
-webkit-text-shadow: 4px 4px 2px gray; 
-moz-text-shadow: 4px 4px 2px gray; 
} 
</style> 
</head> 


<div id="ivy"> 文 字 阴影 效果 </div> 
</body> 
</html> 


运行 以 上 程序 ， 效 果 如 图 13-1 所 示 。 

结合 代码 与 呈现 的 阴影 效果 ， 可 以 得 出 以 下 结论 : 

(1) 阴影 偏 移 分 为 水 平方 向 和 垂直 方向 这 两 个 方向 ， 
x-offset 参数 值 指 的 是 阴影 到 原文 本 的 水 平 距离 ，y-offset 
参数 值 指 的 是 阴影 到 原文 本 的 垂直 距离 。 
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文字 阴影 效果 


图 13-1 一 般 文字 阴影 效果 
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(2) x-offset 与 y-offset 参数 允许 为 负 值 。 
(3) 添加 阴影 偏 移 距离 之 后 ， 可 以 指定 模糊 半径 blur。 模 糊 半径 是 一 个 长 度 值 ， 表 示 阴 
影 模糊 效果 的 范围 。 


13.23 “文字 凹凸 效果 


在 实际 项 目 中 , 很 多 时 候 需 要 给 文本 添加 一 些 立 体感 。 使 用 CSS3 的 shadow 属性 ， 可 以 
方便 地 制作 出 文字 四 凸 效果 ， 呈 现 出 立体 的 感觉 。 下 面 通过 一 个 示例 来 说 明文 字 思 凸 效果 的 
制作 。 

【 例 13-2】 制作 文字 四 凸 效果 。 

首先 ， 设 计 HTML 页 面 代码 ， 其 中 的 <body> 标 签 含有 如 下 div 元 素 : 

<div> 文 字 冉 凸 效果 </div> 

然后 ， 设 计 如 下 CSS FEX: 

<style type="text/css"> 
div 
i 




















display:inline-block: 

padding:20px: 

font-size:40px; 

font-family: Verdana; 

font-weight:bold: 

background-colorzCCC; 

color:#ddd; 

text-shadow:-1px 0 #333, /* ja] ZE BH3%*/ 
0 -1px #333,* 向 上 阴影 */ 
1px 0 将 33,/# 向 右 阴影 所 
0 1px 4333 ;* 向 下 阴影 */ 

} 
</style> 

运行 程序 ， 效 果 如 图 13-2 所 示 。 

如 果 需 要 表现 更 加 丰富 的 效果 ， 那 儿 每 个 方向 上 阴影 的 颜色 可 以 有 不 同 的 设置 。 如 果 
将 向 左 和 向 上 的 阴影 颜色 设置 为 白色 ， 文 字 就 会 有 凸 起 的 效果 。 修 改 text-shadow 属性 ， 如 
下 所 示 : 

text-shadow:-1px 0 #FFF, 上 * 向 左 阴影 */ 
0 -lpx 4FFF, 族 向 上 阴影 */ 
lpx 0#333， /# 向 右 阴影 专 
01px4333; ”人 * 向 下 阴影 */ 

运行 程序 后 ， 效 果 如 图 13-3 所 示 。 


文字 加 本 效果 


图 13-2 ”文字 四 凸 效果 图 13-3 ”更 加 细腻 的 四 凸 效果 


如 果 将 向 右 和 向 下 的 阴影 颜色 设置 为 白色 ， 文 字 就 会 有 凹陷 的 效果 。 修 改 text-shadow 
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属性 ， 如 下 所 示 : 
text-shadow:-lpx 0 #333, 上 * 向 左 阴影 */ 
0 -1px #333,/* 向 上 阴影 */ 
lpx 0 十 FF， 放 向 右 阴影 */ 
OIpx&FFF; /* 向 下 阴影 */ 
运行 程序 后 ， 效 果 如 图 134 所 示 。 


图 13-4 四 陷 的 文字 效果 


13.2.4 为 文本 指定 多 个 阴影 


在 CSS3 中 , 可 以 使 用 text-shadow 属性 来 给 文字 指定 多 个 阴影 , 并 且 针对 每 个 阴影 使 用 不 
同 的 颜色 。 也 就 是 说 ，text-shadow 属性 的 值 可 以 是 一 个 以 英文 逗号 隔 开 的 “ 值 列表 ” 例如 : 
text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3; 


当 text-shadow 属性 的 值 为 “ 值 列表 ”时 ， 阴 影 效 果 会 按照 给 定 的 值 的 顺序 应 用 到 元 素 的 
文本 上 ， 因 此 有 可 能 出 现 互 相 覆 盖 的 现象 。 但 是 text-shadow 属性 永远 不 会 覆盖 文本 本 身 ， 阴 


影 效 果 也 不 会 改变 边框 的 尺寸 。 
【 例 13-3】 为 文本 指定 多 个 阴影 。 
首先 设计 HTML 页 面 ， 在 <body> 标 签 中 添加 以 下 元 素 : 
<div id="ivy"> 多 阴影 效果 </div> 
然后 为 页 面 添加 以 下 样式 : 
<style type="text/css"> 
#ivy 
{ 
font-size:40px; 
text-shadow:4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
-webkit-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
-moz-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
} 
</style> 
运行 程序 ， 效 果 如 图 13-5 所 示 。 


多 阴影 效果 


图 13-5 多 阴影 效果 


13.3 设置 文本 样式 


HTMLS 中 增加 了 许多 属性 ， 用 于 设置 文本 样式 ， 使 得 文本 的 显示 效果 更 加 丰富 。 
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13.3.1 text-stroke 属性 


在 CSS3 中 ， 可 以 使 用 text-stroke 属性 为 文字 添加 描 边 效果 。 描 边 就 是 给 文字 添加 边框 。 
这 是 CSS3 新 增 的 一 个 功能 ，CSS3 的 出 现 使 得 “文字 ”也 能 添加 边框 了 。 
text-stroke 是 一 个 复合 属性 ， 由 text-stroke-width 和 text-stroke-color 两 个 子 属 性 组 成 。 该 
属性 的 使 用 语法 如 下 : 
text-stroke: 宽 度 值 颜色 值 ; 
其 中 , text-stroke-width 属性 用 于 设置 描 边 的 宽度 , 可 以 为 一 般 的 长 度 值 ; text-stroke-color 
属性 用 于 设置 描 边 的 颜色 。 
【 例 13-4】 给 文本 添加 描 边 效果 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>CSS3 text-stroke 属性 </title> 


<style type="text/css"> 
div 


t 















































font-size:30px; 
font-weight:bold; 
j 
#div2 
{ 
text-stroke: 1px red; 
-webkit-text-stroke: 1 px red; 
-moz-text-stroke: 1px red; 
-o-text-stroke: 1px red; 
5 
</style> 
</head> 
<body> 
<div id="div1"> 没 有 描 边 </div> 
<div id="div2"> 文 字 描 边 </div> 
</body> 
</html> 


运行 以 上 程序 ， 效 果 如 图 13-6 所 示 。 


没有 描 边 
文字 描 边 


图 13-6 文字 无 描 边 与 有 描 边 的 效果 对 比 


13.3.2 文本 溢出 
在 浏览 网 页 的 时 候 ， 我 们 经 常 能 看 到 这 样 的 效果 : 当 文 字 超出 一 定 范围 时 会 以 省 略 号 显 
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示 ， 并 隐藏 多 余 的 文本 。 这 是 一 个 用 户 体验 非常 好 的 设计 细节 ， 可 以 让 用 户 知道 还 有 更 多 的 
内 容 未 显示 出 来 。 

在 CSS3 中 ,文本 溢出 属性 text-overflow 用 于 设置 是 否 使 用 省 略 标记 (...) 标 识 对 象 内 文本 
的 溢出 。text-overflow 属性 的 语法 格式 如 下 : 

text-overflow: 取 值 ; 

其 中 ，text-overflow 属性 的 取 值 只 有 两 个 : ellipsis 和 clip. ellipsis 表示 当 对 象 内 的 文本 
溢出 时 显示 省 略 标 记 (...); clip 表示 当 对 象 内 的 文本 溢出 时 不 显示 省 略 标记 (…)， 而 是 将 溢出 
的 部 分 裁 掉 。 

单独 使 用 text-overflow 属性 是 无 法 实现 以 省 略 号 表示 多 余 文 本 的 效果 的 ， 因 为 
text-overflow 属性 只 是 说 明文 字 溢 出 时 用 什么 方式 显示 ， 要 实现 在 文本 溢出 时 产生 省 略 号 效 
果 ， 还 须 定义 以 下 两 个 内 容 : 

1) white-space:nowrap:( 强 制 文本 在 一 行 显示 ) 

2) overflow:hidden:( 将 溢出 内 容 隐 藏 ) 

完整 语法 如 下 : 

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap: 
这 3 个 属性 必须 一 起 使 用 才能 实现 需要 的 溢出 提示 效果 。 
【 例 13-5】 文本 溢出 效果 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 text-overflow 属性 </title> 
<style type="text/css"> 
#div1 
{ 














width:200px; 
height:100px; 
border:1px solid gray; 
text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 
l 
</style> 
</head> 
<body> 
<div id="div1"> 中 国 铁路 总 公司 有 关 负 责 人 介绍 ,“ 复 兴 号 ”是 按照 时 速 350 公里 运营 研发 制造 
的 中 国标 准 动车 组 ,集成 了 大 量 现代 高 新 技术 ， 其 安全 性 、 经 济 性 、 和 舒适 性 以 及 节能 环保 等 性 能 有 较 大 
提升 。 今 年 7 月,“ 复 兴 号 ”动车 组 在 京 沪 高 铁 开展 了 时 速 350 公里 实 车 、 实 重 和 实 速 检验 检测 、 可 行 
性 研究 和 运营 安全 评估 ,组 织 专家 进行 了 评审 咨询 。 通 过 全 面 系统 的 科学 论证 和 综合 评估 ,表明 京 沪 高 
铁 满足 按 设计 速度 350 公里 /小 时 的 运营 要 求 。 中 国 铁路 总 公司 组 织 京 沪 高 速 铁路 公司 及 北京 、 济 南 、 
上 海 铁路 局 ， 在 技术 、 设 备 、 人 员 、 运 营 等 方面 做 了 大 量 准 备 工作 ,“ 复 兴 号 ”动车 组 已 具备 在 京 沪 高 
铁 按时 速 350 公里 运营 的 能 力 和 条 件 。 从 9 月 21 日 起 ， 铁 路 部 门将 安排 7 对 “复兴 号 ”动车 组 在 京 沪 
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高 铁 按时 速 350 公里 运行 。</div> 
</body> 
</html> 


运行 以 上 程序 ， 效 果 如 图 13-7 所 示 。 由 于 使 用 了 “white-space:nowrap;”， 所 有 文字 都 放 
在 了 同一 行 ( 不 换行 )， 然 后 使 用 “text-overflow:ellipsis:”， 使 得 溢出 该 行 的 部 分 以 省 略 号 形式 


显示 。 





中 国 铁路 总 公司 有 关 负 责 … 








图 13-7 文本 溢出 效果 


对 于 下 面 这 种 效果 : 限定 容器 的 高 度 和 宽度 , 在 显示 多 行 之 后 , 只 对 一 行进 行 溢出 处 理 ， 
该 怎么 实现 呢 ? 要 想 实现 这 种 效果 ， 和 暂时 还 无 法 使 用 CSS 来 直接 实现 ， 必 须 借助 JavaScript 
或 jQuery 才 行 。 这 里 不 再 介绍 ， 感 兴趣 的 读者 可 以 查阅 相关 资料 。 


13.3.3 ”强制 换行 一 一 word-wrap 属性 


在 CSS3 中 ， 可 以 使 用 word-wrap 属性 来 设置 “长 单词 ”或 “URL 地 址 ”是 否 换行 到 下 
- 行 ， 语 法 格式 如 下 : 
word-wrap: 取 值 ; 


其 中 ，word-wrap 属性 只 有 两 个 取 值 : normal 和 break-word. normal 为 默认 值 ， 文 本 自 
动 换行 ，break-word 表示 对 长 单词 或 URL 地 址 强制 换行 。 
【 例 13-6】 强制 换行 。 
下 面 首先 来 看 一 段 没有 进行 换行 处 理 的 HTML 代码 ;: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 word-wrap 属性 </title> 
<style type="text/css"> 
#ivy 
d 
width:200px; 
height:120px: 
border: 1px solid gray; 
} 
</style> 
</head> 
<body> 
«div id="ivy">Welcome,everyone!Please remenber our home page website is http://www.vrpie. 
vrp3d.com/«/div- 


</body> 
<html> 
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运行 以 上 程序 ， 效 果 如 图 13-8 所 示 。 
默认 情况 下 ， 文 本 是 自动 换行 的 ， 但 是 如 果 单 词 或 URL 地 址 太 长 ， 就 会 超出 区 域 范围 。 
在 上 面 的 例子 中 ， 当 为 div 元 素 加 上 “word-wrap:break-word: ”属性 时 ， 效 果 如 图 13-9 所 示 。 























elcome,everyone!Please 'elcome,everyone!Please 
remenber our home page remenber our home page 
ebsite is ebsite is 
http://www.vrpie.vrp3d.com/ http://www.vrpie.vrp3d.co| 
m/ 
图 13-8 无 强制 换行 的 效果 图 13-9 ”添加 换行 处 理 之 后 的 效果 





word-wrap 属性 允许 开发 人 员 设 置 文本 强制 换行 ， 这 意味 着 会 对 “长 单词 ”或 “URL 地 
址 ”进行 拆 分 换行 。 

word-wrap 属性 在 中 文 网 站 中 使 用 比较 少 ， 因 为 这 个 属性 是 针对 英文 设计 的 ， 中 文中 没 
有 所 谓 的 “长 单词 ”之 说 。 一 般 情况 下 ， 在 中 文 网 站 开发 中 ，word-wrap 属性 只 要 采用 默认 
值 即 可 。 如 果 开发 的 是 英文 网 站 ， 就 会 经 常用 到 word-wrap 属性 。 


13.3.4 ”由 入 字体 一 一 @font-face 


在 实际 项 目 开发 中 ， 服 务 器 上 的 字体 与 本 地 计算 机 中 的 字体 往往 是 不 一 致 的 。 例 如 ， 

font-family: Verdana, Arial, Times New Roman; 

每 个 人 的 计算 机 上 安装 的 字体 都 不 一 样 , 7458 XC*p (font-family: 44/15, Arial Times New 
Roman;} "时 , 意思 是 p 元 素 优 先 用 Verdana 字 体 来 显示 。 如 果 用 户 的 计算 机 上 没有 安装 Verdana 
字体 ， 那 么 接着 就 用 Arial 字体 来 显示 ; 如 果 也 没有 安装 Arial 字体 ， 就 用 Times New Roman 
字体 来 显示 ， 以 此 类 推 。 

假如 希望 “所 有 用 户 ” 的 计算 机 上 都 能 正常 显示 Verdana 字体 ， 该 怎么 办 呢 ? 这 个 时 候 
就 用 到 了 嵌入 字体 。 

所 谓 “区 入 字体 ”， 就 是 加 载 服务 器 端的 字体 文件 ， 让 浏览 器 可 以 显示 用 户 计算 机 上 没 
有 安装 的 字体 。 

在 CSS3 之 前 ，Web 设计 师 必 须 使 用 已 在 用 户 计算 机 上 安装 好 的 字体 ， 所 以 在 设计 中 会 
有 诸多 限制 。 通 过 CSS3，Web 设计 师 可 以 使 用 他 们 喜欢 的 任意 字体 。 因 此 ， 当 开发 人 员 找 
到 或 购买 希望 使 用 的 字体 时 ， 可 以 将 字体 文件 存放 到 Web 服务 器 上 , 在 需要 时 将 字体 文件 自 
动 下 载 到 用 户 的 计算 机 上 。 

在 CSS3 中 ， 可 以 使 用 @font-face 来 使 得 所 有 客户 端 加 载 服务 器 端的 字体 文件 ， 从 而 使 
得 所 有 用 户 的 浏览 器 都 能 正常 显示 字体 ， 语 法 格式 如 下 : 

@font-face 
s font-family : 字体 名 称 ; 
sre :url(" 字 体 文件 路 径 "); 








i 
其 中 ， 参 数 sre 可 以 是 相对 地 址 ， 也 可 以 是 绝对 地 址 。 如 果 要 引用 第 三 方 网 站 的 字体 文 
件 ， 那 就 使 用 绝对 路 径 ， 如 果 使 用 的 是 自己 网 站 目录 下 的 字体 ， 那 就 使 用 相对 路 径 。 
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【 例 13-7】 嵌入 字体 的 使 用 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> A F f (font-face-/title 
<style type="text/css"> 
ENF AR) 
@font-face 
d 
font-family: myfont; /* 定 义 字体 名 称 为 myfont*/ 
src: url("../font/Horst-Blackletter ttf"): 
) 
div 
d 
font-family:myfont; — /* 使 用 自 定义 的 myfont 字体 作为 p 元 素 的 字体 类 型 */ 
font-size:60px; 
background-color-ZECE2D6; 
color:626C3D; 
padding:20px; 
} 
</style> 
</head> 
<body> 
<div>lvyestudy</div> 
</body> 
</html> 

运行 以 上 程序 ， 效 果 如 图 13-10 所 示 。 

这 里 使 用 @font-face 定义 了 名 为 myfont 的 字体 ， 
然后 在 div 元 素 中 使 用 font-family 属性 来 使 用 这 个 字 (6 4e stu d t 
体 。 从 以 上 程序 可 知 , 如 果 想 要 定义 字体 , 步骤 如 下 : 

(1) 使 用 @font-face 定义 字体 名 称 。 


(2) 使 用 font-family 属性 引用 该 字体 。 图 13-10 殿 入 字体 效果 
在 使 用 时 ， 通 过 @font-face 即 可 使 得 所 有 用 户 都 能 展示 相同 的 字体 效果 。 
注意 : 


通过 @font-face 使 用 服务 器 字体 这 种 方法 ， 不 建议 应 用 于 中 文 网 站 。 因 为 中 文 的 字体 文件 
都 是 几 MB 到 十 几 MB， 这 么 大 的 字体 文件 ， 会 严重 影响 网 页 的 加 载 速度 。 如 果 是 少量 的 特殊 
字体 ， 建 议 使 用 图 片 来 代替 。 英 文 的 字体 文件 只 有 几 十 KB， 非 常 适合 使 用 @font-face。 之 所 以 
中 文 的 字体 文 件 大 而 英文 的 字体 文件 小 ， 原因 很 简单 : 中 文 汉字 多 ， 而 英文 只 有 26 个 英文 字母 。 





13.8.5 FARS 


有 一 定 实践 经 验 的 前 端 开发 者 都 知道 : 在 网 页 中 ， 如 果 改 变 字 体 类 型 ， 那 么 页 面 中 使 
该 字体 类 型 的 文字 的 大 小 都 有 可 能 发 生变 化 ,从 而 可 能 导致 原来 设 定好 的 页 面 布局 产生 混乱 。 


font-size-adjust 属性 
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【 例 13-8】 改变 字体 类 型 导致 页 面 布局 混乱 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 font-size-adjust 属性 </title> 
<style type="text/css"> 
证 定义 整体 样式 */ 
div{font-size:16px:} 
#div1 (font-family:Times New Roman;} 
#div2 {font-family:Arial} 
#div3 {font-family:Comic Sans MS} 
#div4 (font-family:Calibrij 
#div5 {font-family: Verdana} 
</style> 
</head> 
<body> 
«div id="div1">welcome to lvyestudy !</div> 
«div id="div2">welcome to lvyestudy !</div> 
«div id="div3">welcome to lvyestudy !</div> 
«div id="div4">welcome to lvyestudy !</div> 
«div id="div5">welcome to lvyestudy !</div> 


</body> 
</html> 
运行 以 上 程序 ， 效 果 如 图 13-11 所 示 。 g ] ; 
í F welcome to lvyestudy ! 
从 上 面 的 预览 效果 可 以 看 出 ， 即 使 设置 了 相 welcome to Ivyestudy ! 
同 的 font-size 属性 值 ， 但 是 由 于 字体 类 型 一 一 welcome to lvyestudy ! 
font-family 属性 的 不 同 ， 字 体 在 浏览 器 中 显示 的 cree ey 


welcome to lvyestudy ! 


“实际 大 小 ”同样 会 不 一 样 。 这 样 在 实际 开发 中 ， aA 
KEAN AFAN H AEREI RR 图 13.11 SESETAN E 


就 很 可 能 会 因为 文字 大 小 的 变换 导致 原来 的 页 面 
布局 发 生 混乱 
在 CSS3 " 可 以 使 用 font-size-adjust 属性 在 字体 类 型 (font-family) 改 变 的 情况 下 保持 字 
体 大 小 不 变 。 语 法 格式 如 下 : 
font-size-adjust: 属 性 值 ; 
font-size-adjust 属性 的 值 为 一 个 aspect 值 ， 也 就 是 字体 的 小 写字 母 x 的 高 度 ( 即 x-height) 
与 该 字体 font-size 高 度 之 间 的 比率 : 





aspect =(x-height)/(font-size) 


这 个 公式 可 知 ， 如 果 某 个 字体 类 型 的 aspect 值 比较 大 ， 那 么 在 font-size 属性 值 相同 的 
m x-height 比较 大 , 因此 该 字体 类 型 在 浏览 器 中 会 显得 比较 大 。 例 如, Times New Roman 
字体 类 型 的 aspect 值 为 0.46, 这 意味 着 当 字体 大 小 为 100px 时 , 它 的 x-height 为 46px。 而 Verdana 
字体 类 型 的 aspect 值 为 058， 这 意味 着 当 字体 大 小 为 100px 时 ， 它 的 x-height 为 58px。 因 此 ， 
在 font-size 属性 值 相同 的 情况 下 ，Verdana 字体 类 型 在 浏览 器 中 的 显示 效果 会 显得 比 New 
Times Roman 字体 类 型 的 大 。 
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例如 以 下 代码 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 font-size-adjust 属性 </title> 
<style type="text/css"> 
上 # 定 义 整体 样式 村 
div{font-size:16px;} 
#div1 {font-family: Times New Roman; } 
3idiv2 (font-family: Verdana] 
</style> 
</head> 
<body> 
«div id="div1">welcome to VRPIE !</div> 
<div id="div2">welcome to VRPIE !</div> 


</body> 
<html> 
运行 以 上 程序 ， 效 果 如 图 13-12 所 示 。 
运行 以 上 程序 ， 效 果 如 图 13-12 所 nam 


从 图 13-12 中 可 以 看 出 , 相同 的 font-size 属性 值 ， 由 于 字体 类 welcome to VRPIE ! 
型 font-family 不 同 ， 在 浏览 器 中 的 显示 效果 差别 非常 大 ,可 以 想象 ， 图 13-12 程序 运行 效果 图 
如 果 网 站 换 字体 类 型 ， 布 局 一 定 会 乱 。 

下 面 介绍 如 何 使 用 aspect 值 解决 这 个 问题 。 

从 aspect 值 的 计算 公式 aspect =(x-height)/(font-size) 引 出 以 下 公式 : 


c= (a/b)s 


其 中 ， 各 参数 的 含义 如 下 : 
e a: 表示 原来 字体 类 型 的 aspect 值 。 
e b: 表示 现在 字体 类 型 的 aspect 值 。 

e s: 表示 原来 字体 类 型 的 font-size 属性 值 。 

e c: 表示 现在 字体 类 型 的 font-size 属性 值 。 

由 于 想 要 前 后 字体 类 型 在 浏览 器 中 的 实际 大 小 都 相同 ， 也 就 是 x-height 相同 ， 因 此 用 
aspectl 和 font-sizel 表示 “原来 字体 类 型 ”的 aspect 值 和 font-size 属性 值 ,用 aspect2 和 font-size2 
表示 “现在 字体 类 型 ”的 aspect 值 和 font-size 属性 值 ， 由 此 得 到 如 下 两 个 公式 : 

aspect] =(x-height)/(font-size1) 
aspect2 =(x-height)/(font-size2) 

从 上 面 两 个 公式 ， 我 们 得 到 : 
(aspect1)/(aspect2)-(font-size2)/(font-sizel) 

自 此 , 公式 已 经 生成 。 如 果 想 将 “fontsize:16px: ”的 Times New Roman 字体 修改 为 Verdana 
字体 ， 并 且 浏 览 器 显示 的 字体 大 小 仍然 保持 “fontsize:16px:” 的 Times New Roman 字体 的 大 
小 ， 步 骤 如 下 : 

(1) 查询 得 到 Times New Roman 字体 的 aspect fti 7g 0.46, Verdana 字体 的 aspect 值 为 0.58。 

(2) 将 0.58 除 以 0.46， 得 到 近似 值 1.26。 
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(3) 因为 需要 让 浏览 器 实际 显示 的 字体 大 小 为 16px， 所 以 将 16px 除 以 1.26， 得 到 近似 
值 13px。 然 后 在 样式 中 指定 字体 大 小 为 13px。 也 就 是 说 ，13px 的 Verdana 字体 相当 于 16px 
的 Times New Roman 字体 。 

【 例 13-9】 字体 尺寸 自 适应 。 

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS3 font-size-adjust 属性 </title> 
<style type="text/css"> 
#div1 
i 
font-size: lópx; 
font-family:Times New Roman; 
font-size-adjust:0.46; 
} 
#div2 
{ 
font-size:13px; 
font-family:Verdana; 
font-size-adjust:0.58; 
} 
</style> 
</head> 
<body> 
<div id="div1">welcome to VRPIE !</div> 
<div id="div2">welcome to VRPIE !</div> 


</body> 
<html> 
运行 以 上 程序 ， 效 果 如 图 13-13 所 示 。 可 以 看 到 ， 更 | | 
换 字体 前 后 的 字体 大 小 一 致 。 通 过 使 用 fontsize 属性 与 E 


welcome to VRPIE ! 
font-size-adjust 属性 ， 字 体 从 Times New Roman 修改 为 


Verdana 后 ， 浏 览 器 中 的 字体 大 小 没有 改变 。 
13.4 颜色 模式 


赏心悦目 的 颜色 搭配 让 人 感到 舒服 ， 修 改元 素颜 色 的 功能 让 人 趋 之 若 登 。 但 颜色 规划 不 
24, 会 让 网 站 用 户 无 所 适 从 。 颜 色 从 <font cooo > REES, 保留 了 很 多 内 容 ， 也 增加 了 新 
的 内 容 ， 本 节 将 介绍 关于 颜色 模式 的 内 容 。 

以 前 主要 采用 关键 字 、 十 六 进 制 和 RGB 这 三 种 颜色 设置 方式 。CSS3 出 现 后 ， 增 加 了 
RGBA、HSL、HSLA 这 三 种 模式 ， 极 大 地 丰富 了 CSS 的 颜色 设置 方式 。 


13.4.1 XEF 
CSS 颜色 关键 字 包 括 命名 颜色 、transparent、currentColor 属性 值 3 种 。 


图 13-13 字体 大 小 调整 效果 
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e (n4. 指 的 是 直接 使 用 名 字 的 颜色 值 。CSS 支持 17 种 合法 命名 颜色 (标准 颜色 )， 
分 别 是 : aqua. fuchsia, lime, olive red, white, black. gray. maroon, orange. silver. 
yellow, blue. green, navy. purple. teal. 

e transparent: 用 来 表示 文本 的 颜色 纯 透 明 ， 可 以 近似 认为 是 rgba(0.0.0.0)。 

e curentColor: 顾名思义 ， 指 当前 颜色 ， 准 确 来 说 是 指 当前 的 文字 颜色 。 


13.4.2 十 六 进 制 


六 进 制 是 设置 颜色 值 的 常用 方式 , 将 三 个 介 于 00 和 FF 的 十 六 进 制 数 连接 起 来 。 若 十 
六 进 制 的 3 组 数 各 自 成 对 ， 则 可 简写 为 3 位 : 
#abcdef 
#aabbee <=> abc 


Web 安全 色 是 指 在 256 Cul SEBLAR AE LARERE, RRA RGB ffi 2099 
51( 相 应 的 十 六 进 制 值 为 33) 的 倍数 。 因 此 ， 采 用 十 六 进 制 时 ，00\33\66\99\cc\f 被 认为 是 Web 
安全 色 ， 一 共 6X6X6=216 种 。 


13.4.3 RGB 模式 


通过 组 合 不 同 的 红色 、 绿 色 、 蓝 色 分 量 创造 出 的 颜色 被 为 RGB 模式 的 颜色 。 显 示 器 由 
-个 个 像素 构成 ， 利 用 电子 束 来 表现 色彩 。 像 素 把 光 的 三 原色 一 一 红色 (R)、 绿 色 (G)、 蓝 色 
(B) 组 合 起 来 。 每 像素 包含 8 位 元 色彩 的 信息 量 ， 有 0-255 Jt 256 个 单元 ， 其 中 0 是 完全 无 光 
状态 ，255 是 最 亮 状态 。 书 写 方法 如 下 : 
rgb(x%,y%,2%) 
rgb(a,b,c) 


13.4.4 RGBA 模式 








RGBA 模式 在 RGB 模式 的 基础 上 增加 了 alpha 通道 ， 用 来 设置 颜色 的 透明 度 ，alpha 通 
道 值 的 范围 是 0~1。0 代表 完全 透明 ，1 代表 完全 不 透明 。RGBA 颜色 的 表示 方法 如 下 : 

rgba(r,g,b,a) 

IES 浏览 器 不 支持 RGBA 模式 的 颜色 。 事实 上 , IES 浏览 器 对 新 增 的 颜色 模式 并 不 支持 ， 
需要 使 用 gradient 滤 镜 。gradient 滤 镜 的 前 两 位 表示 alpha 透明 度 值 (00 至 D, IEN 00 表示 全 
透明 ， 企 表示 完全 不 透明 。 后 六 位 代表 的 是 RGB 模式 。 

如 果 使 用 #A6DADC 并 且 透 明度 为 0.6 的 透明 色 (0.6*255=153， 转 换 成 十 六 进 制 是 99), 
用 gradient 滤 镜 表示 为 : 

filter:progid:DXImageTransform Microsoft.gradient(enabled = 'true',startColorstr="#99A6DADC", 
endColorstr="#99A6DADC") 


13.4.5 HSL 模式 





HSL 模式 通过 对 色调 (GD、 饱 和 度 (S)、 亮 度 (D) 三 个 颜色 通道 的 变化 以 及 它们 的 相互 登 加 
来 得 到 各 式 各 样 的 颜色 。HSL 标准 几乎 可 以 包括 人 类 视力 所 能 感知 的 所 有 颜色 。HSL 颜色 模 
式 的 表示 方法 如 下 : 
hsl(h.s.1) 
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其 中 ， 各 参数 的 含义 如 下 : 

e jh 表示 色调 (hue)， 色 调 可 以 为 任意 整数 。0( 以 及 360 或 -360) 表 示 红 色 ，60 表示 黄色 ， 
120 表示 绿色 ，180 表示 青色 ，240 表示 蓝 色 ，300 表示 洋红 ( 当 h 值 大 于 360 时 ， 实 
际 的 值 等 于 该 值 模 360 后 的 值 )。 

e s 表 示 饱 和 度 (saturation)， 是 指 颜色 的 深浅 度 和 鲜艳 程度 。 取 值 范围 为 0-100%， 其 中 
0 表示 灰 度 (没有 该 颜色 )，100% 表 示 饱 和 度 最 高 (颜色 最 鲜艳 )。 

e 1 表示 亮度 (lightness)， 取 值 范围 为 0~100%， 其 中 0 表示 最 暗 ( 黑 色 )，100% 表 示 最 
亮 (白色 )。 


13.4.6 HSLA 模式 


HSLA 模式 是 HSL 的 扩展 模式 , 在 HSL 模式 的 基础 上 增加 了 透明 度 通道 alpha 来 设置 透 
明度 ， 表 示 方 法 如 下 : 
hsla(<length>,<percentage>,<percentage>,<opacity>) 
其 中 ， 前 3 个 参数 和 HSL 的 3 个 参数 相同 ， 最 后 一 个 参数 opacity 表示 透明 度 。 


13.5 本 章 小 结 


本 章 介绍 了 CSS3 新 增 的 几 个 文本 属性 、 颜色 控制 以 及 不 透明 效果 支持 。 CSS3 定义 了 功 
能 强大 的 文本 属性 ， 本 章 主要 介绍 了 用 于 控制 文本 阴影 或 模糊 效果 的 text-shadow 属性 ; 用 于 
控制 省 略 文本 的 处 理 方式 的 text-overflow 属性 ， 用 于 控制 文本 超过 指定 容器 的 边界 时 是 否 断 
开 转 行 的 word-wrap 属性 。 

另外 ， 本 章 还 介绍 了 CSS3 版 本 增强 的 颜色 功能 。 例 如 : HSL 颜色 表示 方式 通过 对 色调 
( 印 、 饱 和 度 (S) 和 亮度 (L)3 个 颜色 通道 的 变化 以 及 它们 相互 之 间 的 受 加 来 表示 各 式 各 样 的 颜 
色 ; HSLA 颜色 表示 方式 则 在 HSL 颜色 表示 方式 的 基础 上 增加 了 透明 度 (A) 设 置 。 

通过 本 章 的 学 习 , 读者 应 能 掌握 设置 文本 阴影 的 text-shadow 属性 的 用 法 , 能够 使 用 该 属 
性 设置 文本 阴影 的 位 移 、 模 糊 和 半径 等 ， 掌 握 文本 样式 的 设置 方法 ， 包 括 文本 溢出 、 文 本 换 
行 、 粗 斜体 等 ;掌握 常用 颜色 值 的 用 法 ,包括 RGBA、HSL、HSLA 颜色 值 ， 以 及 opacity 属 
性 的 设置 ， 定 义 transparent 颜色 值 的 方法 等 ， 知 道 如 何 处 理 字体 兼容 性 问题 。 


13.6 思考 和 练习 


. 列 出 CSS3 中 常见 的 文本 属性 ， 并 描述 其 功能 。 
. 使 用 text-shadow 属性 制作 文字 阴影 效果 。 
写 一 个 程序 ， 制 作文 字 浮雕 效果 。 

. 如何 为 同一 个 文本 指定 多 个 阴影 。 

. 在 页 面 上 添加 文本 ， 然 后 给 文本 添加 描 边 效果 。 
. 简 述 常用 的 文本 溢出 的 处 理 方法 。 

- 常用 的 颜色 模式 有 哪些 ? 
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过 去 CSS 可 以 制作 简单 效果 的 背景 和 边框 ， 若 需要 做 一 些 效果 比较 丰富 的 背景 和 边框 ， 
则 需要 设计 师 首先 通过 PhotoShop 去 设计 图 片 ， 然 后 通过 CSS 代码 将 图 片 导入 网 页 ， 作 为 背 
景 和 边框 效果 图 片 。CSS3 增强 了 背景 Miedo CSS3 也 对 原 有 的 盒 模型 进行 了 完 
善 ， 例 如 ， 增 强 了 元 素 边 框 和 背景 样式 的 控制 能 力 ， 新 增 了 不 少 UI 特性 ， 用 于 解决 用 户 界 
面 设置 问题 。 本 章 将 要 介绍 的 就 是 CSS3 wa: 些 样式 ， 其 中 包括 与 背景 
相关 的 几 个 属性 ， 以 及 如 何在 一 个 元 素 的 背景 中 使 用 多 个 图 像 文 件 ， 如 何 绘制 圆 角 边框 ， 如 
何 给 元 素 添加 图 像 边框 等 。 

本 章 学 习 目 标 : 
掌握 多 色 边框 的 设置 方法 
掌握 边框 背景 的 设置 方法 
掌握 圆 角 边框 的 设置 方法 
掌握 阴影 的 设置 方法 
掌握 背景 的 设置 方法 





14.1 设计 多 色 边 框 


在 CSS2 中 ， 我 们 可 以 用 border-color 设置 边框 的 颜色 。 在 CSS3 中 ， 可 以 使 用 border-colors 
属性 来 实现 多 色 边 框 ， 使 得 开发 人 员 可 以 更 加 灵活 地 设置 边框 的 颜色 。 


14.1.1 用 法 详解 


border-colors 属性 的 基本 语法 如 下 : 
-moz-border-top-colors: 颜 色 值 ; 
-moz-border-right-colors: 颜 色 值 ; 
-moz-borderbottom-colors: 颜 色 值 ; 
-moz-border-left-colors: 颜 色 值 ; 


这 个 属性 适用 于 所 有 元 素 , 无 初始 值 。 颜色 取 值 可 以 是 任意 合法 的 颜色 值 或 颜色 值 列表 ， 
支持 不 透明 参数 设置 ， 与 CSS2 中 的 border-color 属性 可 以 混合 使 用 。 当 为 该 属性 设置 一 个 颜 
色 值 时 ， 表 示 为 边框 设置 纯色 。 如 果 设 置 n 个 颜色 值 ， 且 边框 宽度 为 n 像素 ， 那 么 就 可 以 在 
边框 上 使 用 n 种 颜色 , 每 种 颜色 显示 1 像素 的 宽度 。 如 果 边 框 宽度 是 10 像素 , 但 是 只 声明 了 
5 种 颜色 ， 那 么 最 后 一 种 颜色 将 被 应 用 于 剩 下 的 宽度 。 

对 于 CSSS3 中 的 border-colors 属性 ， 需 要 注意 3 点 : 

1) border-colors 属性 并 没有 得 到 各 大 主流 浏览 tn 目前 仅 有 Mozilla Gecko 引擎 
(Firefox 浏览 器 ) 支 持 ， 因 此 需要 加 上 浏览 器 前 级 “-moz-” 

2) 不 能 使 用 -moz-border-colors 属性 为 4 条 边 同时 设 定 颜色 , 必须 像 上 述 语法 那样 分 别 为 

















*236* HTMLS:CSS3 网 页 设计 基础 教程 








4 条 边 设 定 颜色 。 

3) 如 果 边框 宽度 (border-width) 为 n 像素 ， 那么 该 边框 可 以 使 用 n 种 颜色 ,每 种 颜色 显示 
1 像素 的 宽度 。 

上 述 第 二 条 主要 是 为 了 避免 与 border-color 属性 的 原始 功能 发 生 冲 突 。 因 此 ，CSS3 在 这 
个 属性 的 基础 上 派生 了 4 个 边框 颜色 属性 : 

* border-top-color: 指定 元 素 项 部 边框 的 颜色 。 

* border-right-color: 指定 元 素 右 侧 边 框 的 颜色 。 

* border-bottom-color: 指定 元 素 底部 边框 的 颜色 。 

* border-left-color: 指定 元 素 左 侧 边框 的 颜色 。 


14.1.2 ”案例 实战 


本 节 主 要 使 用 border-colors 属性 来 实现 多 色 边 框 及 渐变 边框。 
【 例 14-1】 实 现 多 色 边 框 。 
«IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 border-colors 属性 </title> 
<style type="text/css"> 
#div1 
{ 
width:200px: 
height:100px; 
border-width:8px; 
border-style:solid; 
-moz-border-top-colors:ZDOEDFD £B8EAFD #9DD9FC #8DD4FC £71C9FC #4ABBFC 
#1DACFE #00A2FF: 
-moz-border-right-colors:#DOEDFD #B8E4FD #9DD9FC #8DD4FC £71C9FC #4ABBFC 
#1DACFE #00A2FF: 
-moz-border-bottom-colorszDOEDFD #B8E4FD £9DD9FC #8DD4FC #71C9FC #4ABBFC 
#1DACFE #00A2FF: 
-moz-border-left-colors:£DOEDFD #B8E4FD #9DD9FC #8DD4FC #71C9FC #4ABBFC 
#1DACFE #00A2FF: 








} 
</style> 
</head> 
<body> 
«div id="div1"> 
</div> 
</body> 


运行 以 上 代码 , 效果 如 图 14-1 所 示 。 此 处 边框 
宽度 为 8px, 每 条 边框 使 用 border-colors 属性 定义 8 
个 渐变 颜色 值 。 


图 14-1 多 色 边 框 效果 图 


第 14 章 背景 和 边框 。237。 


14.2 设计 边框 背景 


有 前 端 开 发 经 验 的 开发 人 员 都 知道 , 边框 样式 可 通过 border-style 属性 来 实现 , 过 去 边框 
只 有 实 线 、 虚 线 、 点 状 线 等 几 种 简单 形式 。 假 如 开发 人 员 想 要 为 边框 添加 漂亮 的 背景 图 片 ， 
就 需要 通过 其 他 方式 来 实现 。 在 CSS3 中 ， 可 以 使 用 border-image 属性 为 边框 添加 背景 图 片 。 


14.2.1 border-image 属性 


border-image 属性 的 最 简单 使 用 方法 如 下 : 
border-image:url( 图 像 文件 的 路 径 )ABCD 平 铺 方式 ; 
其 中 ， 参 数 url 用 于 指定 背景 图 片 ，A、B、C、D 四 个 参数 表示 当 浏 览 器 自动 对 边框 
到 的 图 像 进 行 分 割 时 的 上 边 距 、 右 边 距 、 下 边 距 、 左 边 距 ， 平 铺 方式 用 于 指定 图 片 的 平 铺 方 
式 ， 有 repeat( 重 复 )、round( 平 铺 ) 和 stretch( 拉 伸 )3 个 取 值 。 例 如 : 
border-image: url(borderimage.png) 18 18 18 18 repeat; 
这 条 语句 将 边框 背景 分 割 成 图 14-2 所 示 效 果 。 























图 14-2 “分割 边框 背景 





由 此 可 见 ， 图 像 被 分 割 成 9 部 分 ， 犹 如 九宫 格 。 这 9 部 分 图 像 的 名 称 如 下 所 示 : 
border-top-left-image lborder-top-image Iborder-top-right-image 






border-left-image | lborder-right-image 
border-bottom-left-image lborder-bottom-image Iborder-bottom-right-image 

具体 显示 的 时 候 ，border-top-left-image、border-top-right-image、border-bottom-left-image、 
border-bottom-right-image 这 4 部 分 没有 任何 展示 效果 ， 不 会 平 铺 、 不 会 重复 、 也 不 会 拉 伸 ， 
类 似 于 视觉 中 的 盲点 。 

对 于 border-top-image, border-right-image, border-bottom-image, border-left-image 这 4 
部 分 ， 浏 览 器 分 别 作为 上 边框 使 用 的 图 像 、 右 边框 使 用 的 图 像 、 下 边框 使 用 的 图 像 、 左 边框 
使 用 的 图 像 进行 显示 ， 必 要 时 可 以 对 这 4 部 分 图 像 进行 平 铺 或 拉 伸 。 

使 用 border-image 属性 指定 边框 宽度 的 方法 为 : 
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border-image:url( 图 像 文 件 的 路 径 ) AB C D/border-width 
例如 : 
border-image:url(borderimage.png) 18/5px 18 18 18/10px: 
border-image 属性 的 使 用 示例 如 下 : 
-border image( 
width:400px: 
height: 100px; 
border: lem double orange; 
border-image:url(img/border.png) 27 round; 
5 
显示 效果 如 图 14-3 所 示 。 
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图 14-3 显示 效果 
14.22 border-image 绘制 原理 简 述 


在 border-image 切割 中 ， 共 存在 两 个 九宫 格 : 一 个 是 边框 图 片 ， 另 一 个 就 是 边框 本 身 ， 
九 个 方位 的 关系 一 一 对 应 。 边 框 本 身 的 特性 让 其 变 成 一 个 九宫 格 ， 四 条 边框 交错 ， 加 上 其 围 
住 的 区 域 ， 正 好 形成 一 个 九宫 格 。 边 框图 片 则 通过 图 片 裁剪 实现 了 九宫 格 。 这 是 理解 绘制 原 
理 的 基础 。 

(1) 首先 调用 边框 图 片 ，border-image 的 url 属性 ， 通 过 相对 或 绝对 路 径 链接 图 片 。 

(2) 进行 边框 图 片 的 裁剪 : 用 border-image 的 数值 参数 裁剪 边框 图 片 ， 形 成 九宫 格 。 

G) 接着 裁剪 图 片 填充 边框 : 边框 图 片 被 切割 成 9 部 分 ， 以 一 一 对 应 的 关系 放 到 div 边 
框 的 九宫 格 中 ， 然 后 压缩 (或 拉 伸 ) 至 边框 (borderwidth 或 border-image-width) 的 宽度 大 小 。 

(4) 执行 重复 属性 ， 被 填充 至 边框 九宫 格 四 个 角落 的 边框 图 片 不 执行 重复 属性 。 上 下 的 
九宫 格 执行 水 平方 向 的 重复 属性 ( 拉 伸 或 平 铺 )， 左 右 的 九宫 格 执行 垂直 方向 的 重复 属性 ， 而 
中 间 的 九宫 格 则 水 平和 垂直 方向 的 重复 属性 都 要 执行 。 

(5) 完成 绘制 ， 实 现 边框 背景 效果 。 


14.3 设计 圆 角 


我 们 在 浏览 网 站 的 时 候 ， 经 常 能 看 到 圆 角 的 效果 。 在 CSS 2.1 中 ， 为 元 素 实现 圆 角 效果 
是 很 头疼 的 一 件 事 。 老 办 法 都 是 使 用 背景 图 片 来 实现 ， 制 作 起 来 相对 麻烦 。 但 是 CSS3 中 
border-radius 属性 的 出 现 ， 完 美 地 解决 了 圆 角 效果 难以 实现 的 问题 。 


14.3.1 border-radius 属性 


在 前 端 开发 中 ， 对 于 网 页 设计 ， 一 般 都 是 秉 着 “尽量 少 用 图 片 ”的 原则 ， 能 用 CSS 实现 
的 效果 ， 就 尽量 不 要 使 用 图 片 。 因 为 图 片 需要 引发 HITP 请 求 ， 并 且 传输 量 大 ， 影 响 网 页 加 
载 速度 。 但 在 过 去 ， 在 CSS2 中 为 了 实现 一 些 圆 角 效果 ， 只 能 用 背景 图 片 。 而 在 CSS3 中 ， 
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[以 使 用 border-radius 属性 为 元 素 添加 圆 角 效果 。 语 法 格式 如 下 : 
border-radius: 长 度 值 : 
其 中 ， 长 度 值 可 以 是 px、 百 分 比 、em 等 。 下 面 来 看 一 个 使 用 border-radius 属性 设置 加 
角 效 果 的 简单 例子 。 
【 例 14-2] 设计 圆 角 效果 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 border-radius 属性 </title> 
<style type="text/css"> 
#div1 
{ 
width:100px; 
height:50px; 
border:1px solid gray; 
border-radius: 10px; 
} 
</style> 
</head> 
<body> 
<div id="div1"></div> 
</body> 
</html> 
运行 以 上 程序 ， 效 果 如 图 144 所 示 。 其 中 ，border- 
radius10px:” 指 定 元 素 四 个 角 的 贺 角 半径 者 是 10px。 | 


14.3.2 border-radius 属性 的 4 种 写法 

















图 14-4 圆 角 效果 
与 border. padding. margin 等 属性 类 似 ， 圆 角 属性 ii 


border-radius 也 有 4 种 写法 ， 分 别 如 下 : 

1) 设置 borderradius 为 1 个 值 

当 设置 border-radius 为 1 个 值 时 ， 例 如 “borderradius:10px:”， 表 示 4 个 角 的 圆 角 半径 
都 是 10px。 
2) 设置 border-radius 为 2 个 值 
当 设 置 border-radius 为 2 个 值 时 ， 例 如 “border-radius:10px 20px:”， 表 示 左 上 角 和 右 下 
角 的 圆 角 半径 是 10px， 右 上 角 和 左下 角 的 圆 角 半径 都 是 20px。 
3) F border-radius 为 3 MÉ 
当 设 置 border-radius 为 3 个 值 时 ,例如 “border-radius:10px 20px 30px;”， 表 示 左 上 角 的 
避 角 半径 是 10px， 左 下 角 和 右上 角 的 圆 角 半径 都 是 20px， 右 下 角 的 圆 角 半 径 是 30px。 
4) 设置 border-radius 为 4 个 值 
当 设 置 border-radius 为 4 个 值 时 ,例如 “border-radius:10px 20px 30px 40px:”， 表 示 左 上 
角 、 右 上 角 、 右 下 角 和 左下 角 的 圆 角 半径 依次 是 10px、20px、30px、40px。 

这 里 的 “左上 角 、 右 上 角 、 右 下 角 和 左下 角 ”， 大 家 按照 顺 时 针 方向 记忆 就 可 以 记 住 了 。 








"SE 
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【 例 14-3】 设置 复杂 的 圆 角 效果 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 border-radius 属性 </title> 
<style type="text/css"> 
#div1 
{ 
width:200px; 
height:100px; 
border:1px solid red; 
border-radius: 10px 20px 30px 40px; 
background-color:#FCE9B8; 
} 
</style> 
</head> 
<body> 
«div id="div1"> 
</div> 
</body> 
</html> 
运行 以 上 程序 , 效果 如 图 14-5 所 示 。 感 兴趣 的 读者 可 以 改 
变 属 性 值 来 查看 当 border-radius 属性 为 不 同 值 时 的 效果 。 
14.3.3 用 border-radius 属性 画 实心 半圆 和 实心 圆 
4. 画 实 心 半圆 图 14-5 “不 同 半径 的 圆 角 效 果 
实心 半圆 分 为 ， 实 心 上 半 圆 、 实 心 下 半圆 、 实 心 左 半圆 、 实 心 右 半圆 。 只 要 掌握 制作 一 
个 方向 的 实心 半圆 的 方法 ， 其 他 方向 的 实心 半圆 即 可 轻松 实现 ， 因 为 原理 都 一 样 。 
下 面 来 制作 实心 上 半圆 ， 实 现 方法 为 : 把 高 度 heighb 设 为 宽度 (widthb) 的 一 半 ， 并 且 只 设 
置 左 上 角 和 右上 角 的 圆 角 半 径 与 元 素 的 高 度 一 致 , 而 将 右 下 角 和 左下 角 的 贺 角 半径 设置 为 0。 
【 例 14-4】 绘制 实心 上 半圆 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 border-radius 属性 </title> 
<style type="text/css"> 
#divl 
í 
width:200px: 
height: 100px: 
border:1px solid red: 
border-radius:100px 100px 0 0; 
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background-color-ZFCE9B8; 
j 
</style> 
</head> 
<body> 
«div id="div1"> 
</div> 
</body> 
<html> 
运行 程序 ， 效 果 如 图 14-6 所 示 。 
border-radius 属性 值 是 圆 角 的 半径 ， 大 家 结合 圆 和 和 矩形 的 数 
学 知识 ， 稍 微 想 一 想 就 能 够 知道 实心 半圆 的 实现 原理 。 
2. 画 实 心 圆 图 14-6 实心 上 半圆 


在 CSS3 中 ， 使 用 border-radius 属性 实现 实心 圆 的 方法 为 ， 把 宽度 (width) 与 高 度 (height) 
设置 为 相同 的 值 ， 也 就 是 正方 形 ， 并 且 四 个 圆 角 的 值 都 设置 为 宽度 或 高 度 值 的 一 半 。 
【 例 14-5】 绘制 实心 圆 。 
«IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS3 border-radius 属性 </title> 
<style type="text/css"> 
#div1 
d 
width:100px: 
height: 100px: 
border: 1px solid red; 
border-radius:5O0px; 
background-color-ZFCE9BS8; 
i; 
</style> 
</head> 
<body> 
<div id="div1"> 
</div> 
</body> 
<html> 
运行 以 上 程序 ， 效 果 如 图 14-7 Bras. 
3. border-radius 属性 的 派生 子 属性 
以 上 介绍 的 border-radius 属性 ， 都 是 作为 整体 进行 设置 ， 各 个 
角 的 半径 设置 都 放 在 一 条 语句 里 。 事 实 上 ，borderradius 属性 可 
以 分 开 ， 分 别 为 四 个 角 设 置 相应 的 半径 ， 这 些 子 属性 如 下 : 
e border-top-right-radius: 设置 右上 角 。 
* border-bottom-right-radius: 设置 右 下 角 。 





dl 














图 14-7 ”实心 圆 
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* border-bottom-left-radius:. 设置 左下 角 。 
* border-top-left-radius: 设置 左上 角 。 


144 设计 阴影 


前 面 介绍 了 为 文字 添加 阴影 的 text-shadow 属性 ， 本 节 介 绍 box-shadow 属性 。CSS3 的 
box-shadow 属性 有 点 类 似 于 text-shadow 属性 ， 只 不 过 不 同 的 是 : text-shadow 属性 是 为 文本 
设置 阴影 ， 而 box-shadow 属性 是 为 对 象 实现 图 层 阴影 效果 。 


14.4.1 box-shadow 属性 

















box-shadow 属性 的 使 用 语法 如 下 : 
E (box-shadow: length» <length> <length>?<length>?]|<color>} 
也 就 是 : 
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 
其 中 ，E 代表 对 象 选择 器 ，box-shadow 代表 阴影 类 型 ，x-offset 为 X 轴 偏 移 量 ，y-offset 
A Y 轴 偏 移 量 ，blur-radius 为 阴影 模糊 半径 ，spread-radius 为 阴影 扩展 半径 ，color 为 阴影 的 
颜色 。 各 参数 的 具体 作用 如 下 : 
e box-shadow: 此 参数 是 一 个 可 选 值 ， 如 果 不 设 置 ， 那 么 默认 的 投影 方式 是 外 阴影 ; 如 
果 设 置 为 唯一 值 mset， 就 是 将 外 阴影 变 成 内 阴影 。 也 就 是 说 ， 设 置 阴影 类 型 为 inset 
时 ， 其 投影 就 是 内 阴影 。 
e x-offset: 指 阴影 水 平 偏 移 量 ， 值 可 以 是 正 负 值 。 如 果 为 正 值 ， 那 么 阴影 在 对 象 的 右 
边 ， 反 之 为 负 值 时 ， 阴 影 在 对 象 的 左边 。 
e y-offset: 指 阴影 的 垂直 偏 移 量 ， 值 也 可 以 是 正 负 值 。 如 果 为 正 值 ， 那 么 阴影 在 对 象 
的 底部 ， 反 之 为 负 值 时 ， 阴 影 在 对 象 的 顶部 。 
e blurradius: 此 参数 可 选 ， 但 值 只 能 是 正 值 。 值 为 0 时 ， 表 示 阴 影 不 具有 模糊 效果 。 
值 越 大 ， 阴 影 的 边缘 就 越 模糊 。 
e spread-radius: 此 参数 可 选 ， 值 可 以 是 正 负 值 。 如 果 为 正 值 ， 那 么 整个 阴影 都 延展 扩 
大 ; 反之 为 负 值 时 ， 则 缩小 。 
* color: 此 参数 可 选 ， 不 设 定 任何 颜色 时 ， 浏 览 器 会 取 默 认 色 ， 但 各 浏览 器 的 默认 色 
不 一 样 ， 特 别 是 采用 webkit 内 核 的 Safari 和 Chrome 浏览 器 将 无 色 ， 也 就 是 透明 ， 建 
议 不 要 省 略 此 参数 。 
box-shadow 和 text-shadow 属性 一 样 ， 可 以 使 用 一 个 或 多 个 投影 。 使 用 多 个 投影 时 ， 必 
须 将 它们 用 逗号 “，” 分 开 。 


14.4.2 box-shadow 兼容 性 处 理 








为 了 兼容 各 主流 浏览 器 并 支持 这 些 主 流 浏 览 器 的 较 低 版 本 , 在 基于 webkit 内 核 的 Chrome 
和 Safari 等 浏览 器 中 使 用 box-shadow 属性 时 ， 需 要 将 属性 的 名 称 写成 -webkit-box-shadow 的 
形式 。Firefox 浏览 器 则 需要 写成 -moz-box-shadow 的 形式 ， 书 写 格 式 如 下 : 
.box-shadow{ 
-moz-box-shadow: 投 影 方式 义 轴 偏 移 量 Y 轴 偏 移 量 ”阴影 模糊 半径 阴影 扩展 半径 阴影 颜色 ; 
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-webkit-box-shadow: 投 影 方式 义 轴 偏 移 量 Y 轴 偏 移 量 阴影 模糊 半径 阴影 扩展 半径 阴影 颜色 ; 
box-shadow: 投 影 方式 义 轴 偏 移 量 立轴 偏 移 量 阴影 模糊 半径 阴影 扩展 半径 阴影 颜色 ; 
出 于 方便 因素 的 考虑 , 后 面 的 CSS 属性 只 写 了 box-shadow 属性 , 没有 写 -moz- 和 -webkit- 
前 级 的 形式 ， 在 实际 项 目 中 不 要 忘记 加 上 。 


14.4.2 ”案例 实战 


【 例 14-6】 制作 简单 的 阴影 效果 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv-"Content-Type" content="text/html; charset=utf-8" /> 
<title>box-shadow</title> 














height:300px; 
-moz-box-shadow:5px 5px; 
-webkit-box-shadow:5px 5px; 
box-shadow:5px 5px; 
} 
</style> 
</head> 
<body> 
-imgsrc-"img/lpng" /> 
</body> 
</html> 


运行 以 上 程序 ， 效 果 如 图 14-8 所 示 。 





图 14-8 简单 的 阴影 效果 


【 例 14-7】 定义 位 移 、 阴 影 大 小 和 阴影 颜色 。 
<!DOCTYPE html> 
<html> 
<head> 
«meta http-equiv="Content-Type" content-"text/html; charset-utf-8" /> 
<title>box-shadow</title> 
style type="text/css"> 
img{ 
height:300px; 
-moz-box-shadow:2px 2px 10px #06C; 
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-webkit-box-shadow:2px 2px 10px #06C: 
box-shadow:2px 2px 10px #06C; 

} 

</style> 

</head> 

<body> 

<img src="img/l.png" /> 
</body> 
<html> 


运行 以 上 程序 ， 效 果 如 图 14-9 所 示 。 





图 14-9 复杂 的 阴影 效果 


【 例 14-8】 制作 多 色 阴 影 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8" /> 
<title>box-shadow</title> 
<style type="text/css"> 
body { 
margin:24px: 
) 
img{ 
height:300px; 
-moz-box-shadow:-10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow, 
0 10px 12px green: 
-webkit-box-shadow:-10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow. 
0 10px 12px green; 
box-shadow:-10px 0 12px red, 
10px 0 12px blue, 
0 -10px 12px yellow, 
0 10px 12px green: 
} 
</style> 
</head> 
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«imgsrc-"img/lpng" /> 
</body> 
<html> 


运行 以 上 程序 ， 效 果 如 图 14-10 所 示 。 





图 14-10 多 色 阴影 效果 


145 设计 背景 


为 了 方便 、 灵 活 地 设计 网 页 效果 ，CSS3 增强 了 background 属性 的 功能 ， 允 许 在 同一 个 
元 素 内 县 加 多 个 背景 图 像 。 该 属性 的 基本 语法 如 下 : 
background:[<bg-layer>,]*<final-bg-layer>; 
尽管 与 在 CSS2 中 的 用 法 基本 相同 ， 不 过 CSS3 允许 在 background 属性 中 添加 多 个 背景 
图 像 组 ， 背 景 图 像 之 间 通 过 逗号 进行 分 隔 。 其 中 ，<bg-layer> 表 示 一 个 背景 图 像 层 。 每 个 背景 
图 像 层 都 可 以 包含 下 面 的 值 : 
[background-color] | [background-position] | [background-size] | [background-repeat] | [packground-origin] 
| [background-clip] | [packground-attachment] | [background-image] 
为 了 方便 定义 背景 图 像 ，background 属性 又 派生 了 8 个 子 属性 ， 如 表 14-1 所 示 。 


表 14-1 background 派生 子 属性 

















子 属性 描述 
background-color 规定 要 使 用 的 背景 颜色 
background-position 规定 背景 图 像 的 位 置 
background-size 规定 背景 图 片 的 尺寸 
background-repeat 规定 如 何 重复 背景 图 像 
background-origin 规定 背景 图 片 的 定位 区 域 
background-clip 规定 背景 的 绘制 区 域 
background-attachment 规定 背景 图 像 是 否 固定 或 随 着 页 面 的 其 余部 分 滚动 
background-image 规定 要 使 用 的 背景 图 像 








在 Firefox 浏览 器 中 ， 支 持 除 了 background-size 属性 之 外 的 其 他 3 个 新 属性 ， 在 书写 样 
式 代码 时 ， 需 要 在 属性 的 前 面 加 上 -moz- 前 级 。 而 在 使 用 background-break 属性 时 ， 在 样式 代 
人 码 中 不 使 用 -moz-background-break， 而 使 用 -moz-background-inline-policy， 这 一 点 需要 注意 。 
在 Safari, Chrome 和 Opera 浏览 器 中 ， 支 持 除了 background-break 之 外 的 其 他 3 个 新 属性 ， 
在 样式 代码 中 需要 在 属性 的 前 面 加 上 -webkit- 前 级 。 
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1 


括 内 边 距 条 


q 


4.5.1 background-image 属性 


background-image 属性 用 于 为 元 素 设置 背景 图 像 。 元 素 的 背景 占据 元 素 的 全 部 尺寸 ， 包 





E 直 方向 上 重复 。 


background-image 


边框 ， 但 不 包括 外 边 距 。 默 认 情况 下 ， 背 景 图 像 位 于 元 素 的 左上 角 ， 并 在 水 平和 





属性 会 在 元 素 的 背景 中 设置 一 幅 图 像 。 根 据 background-repeat 属性 的 


值 ， 图 像 可 以 无 限 平 铺 、 沿 着 某 个 轴 (X Rus Y 轴 ) 平 铺 ， 或 者 根本 不 平 铺 。 初 始 背景 图 像 根 


据 background-position 属性 的 值 放 置 。 
需要 注意 的 是 ， 在 设置 背景 图 像 时 ， 最 好 设置 一 种 可 用 的 背景 颜色 。 这 样 的 话 ， 即 使 背 
景 图 像 不 可 用 ， 页 面 也 可 获得 良好 的 视觉 效果 。 
background-image 属性 的 语法 格式 如 下 : 
background-image: url( 图 片 路 径 ); 








例如 : 


background-image:url(//eg bg 04.gif 
14.5.2 background-position 属性 


background-position 属性 用 于 设置 背景 图 像 (由 background-image 属性 定义 ) 的 起 始 位 置 ， 
背景 图 像 如 果 要 重复 ， 将 从 这 一 位 置 开 始 。 
需要 注意 的 是 , 把 background-attachment 属性 设置 为 fxed, 才能 保证 该 属性 能 在 Firefox 
和 Opera 浏览 器 中 正常 工作 。 
background-position 属性 的 语法 格式 如 下 : 
background-position- E Gr s 
起 始 位 置 的 取 值 如 表 14-2 所 示 。 


表 14-2 起 始 位 置 的 取 值 








值 描述 
top left 
top center 
top right 
center left 
center center 如 果 仅 规定 了 一 个 关键 词 ， 那 么 第 二 个 值 将 是 "center"， 默 认 值 为 0% 096 
center right 
bottom left 
bottom center 
bottom right 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 
x% y% 左上 角 是 0% 0%, ti Ffi 100% 100% 
如 果 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50% 
第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 科 直 位 置 
人 左上 角 是 00， 单 位 是 像素 (Opx 0px) 或 任何 其 他 CSS 单位 





如 果 仅 规定 了 一 个 值 ， 另 一 个 值 将 是 50% 
可 以 混合 使 用 % 和 position 值 
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例如 ， 定 位 背景 图 像 到 中 间 位 置 ， 代 码 如 下 : 





<style type="text/css"> 

body 

1 
background-image:url(/i/eg bg 03.gif): 
background-position:center; 

j 

</style> 


14.5.3 background-size 属性 


background-size 属性 用 于 规定 背景 图 像 的 尺寸 ， 语 法 格式 如 下 : 


background-size: length|percentage|cover|contain; 


其 中 ， 各 参数 说 明 如 下 : 


length: 设置 背景 图 像 的 高 度 和 宽度 。 第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 如 果 
只 设置 一 个 值 ， 第 二 个 值 会 被 设置 为 auto。 

percentage: 以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 第 一 个 值 设置 宽度 ， 
第 二 个 值 设置 高 度 。 如 果 只 设置 一 个 值 ， 第 二 个 值 会 被 设置 为 auto。 

cover: 把 背景 图 像 扩展 至 足够 大 ， 以 使 背景 图 像 完全 履 盖 背景 区 域 。 背 景 图 像 的 某 
些 部 分 也 许 无 法 显示 在 背景 区 域内 。 

contain: 把 背景 图 像 扩 展 至 最 大 尺寸 ， 以 使 其 宽度 和 高 度 完全 适应 内 容 区 域 。 


【 例 14-9】 拉 伸 背景 图 像 。 


<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
background:url(img/2.png); 
background-size:35% 100%; 
-moz-background-size:35% 10096; /* 老 版 本 的 Firefox */ 
background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
<div> 
<p> 这 是 一 个 段落 。</ 
<p> 这 是 一 个 段落 。<h 
<p> 这 是 一 个 段落 。</ 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
<p> 这 是 一 个 段落 。 
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<p> 这 是 一 个 段落 。</p> 
<p> 这 是 一 个 段落 。</p> 
</div> 


<html> 


运行 以 上 程序 ， 效 果 如 图 14-11 所 示 ， 拉 伸 背景 图 像 来 完全 覆盖 内 容 区 域 。 


这 是 一 个 段落 。 
这 是 一 个 段落 。 





图 14-11 拉 伸 背景 图 像 


【 例 14-10】 复制 背景 图 像 。 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 

background: url(img/2.png): 
background-size: 2596; 
border: 2px solid #92b901: 


<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 








个 段落 。 








<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 
<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 


个 段落 。 








<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 


个 段落 。 








个 段落 。 








<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 


个 段落 。 





<p> 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 一 个 段落 。 这 是 





</div> 
</body> 
<html> 


个 段落 。 


EA 


运行 以 上 程序 ， 效 果 如 图 14-12 所 示 。 拉 伸 背 景 图 像 ， 可 以 看 到 背景 图 像 在 水 平和 垂直 


方向 上 分 别 复制 了 多 次 。 
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tarata 


图 14-12 复制 背景 图 像 效 果 








14.5.4 background-origin 属性 


background-origin 属性 规定 background-position 属性 相对 于 什么 位 置 来 定位 。 如 果 背 景 图 
像 的 background-attachment 属性 为 fxed， 那 么 该 属性 不 生效 。 
background-origin 属性 的 语法 格式 如 下 : 


background-origin: padding-box|border-box|content-box: 


其 中 ，padding-box 用 于 指定 背景 图 像 相对 于 内 边 距 框 来 定位 ，border-box 指定 背景 图 像 
相对 于 边框 盒 来 定位 ，content-box 指定 背景 图 像 相对 于 内 容 框 来 定位 。 
【 例 14-11】 指定 背景 图 像 相对 于 内 容 框 来 定位 。 


EEEE 


EE 


<style> 

div { 
border: 1px solid black; 
padding: 35px; 
background-image: url('img/2.png"); 
background-repeat: no-repeat; 
background-position: left; 

} 

#div1 { 
background-origin: border-box; 

} 

#div2 { 
background-origin: content-box; 


«div id="div1"> 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定 


o BREM. HREM. HREM. HIEM. HREM. HREM. HREM EREM. FRE 
。 背 景 定 位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定 位 。 背 景 定 位 。 背 景 定位 。 背 景 定位 。 背 景 定 
。 背 景 定 位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定 位 。 背 景 定位 。 背 景 定位 。 背 景 定 
。 背 景 定位 。 背 景 定 位 。</div> 


<p>background-origin:content-box:</p> 
<div id-"div2"> 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背 景 定 位 。 背 景 定位 。 背 景 定 


。 背 景 定位 。 背 景 定位 。 背 景 定位 。 背景 定 位 。 背 景 定位 。 背 景 定 位 。 背 景 定位 。 背 景 定位 。 背 景 定 
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位 。 背 景 定位 。 背 景 定位 。</div> 
</body> 
<html> 


运行 程序 ， 效 果 如 图 14-13 所 示 。 


| g B 
|, D semen x 

Q | © 12700.18020/ch14/14-11 
[iim Zim mme A mR m fo mTR2SA. ieechopEREISs A Echop : BEANE 


background-origin:border-box: 





Li FEU BREU BREU SIEU HAPU KREU ERSSRBÜU, HIPU mu 
WU, AREL BREU SSEL HIEU BREL SSE BREU H! um 
EU SREL SSEL SREO SREL HREL SREL BREU. Hi 位 . 背 


REU HREN. KREU. 





background-origin:content-box: 










Mu, GREU BREU SREL BREN SSEL SREO HREL H! 
REL. KREU, KREU HREL HREN. HREL BREU. E d 
L HREN BREU, HREL HREOC HREL HREN FREU HRE 
位 。 AREN. BEEUL 


deu 











图 14-13 背景 图 像 定 位 效果 
14.5.5  background-repeat 属性 


background-repeat 属性 规定 了 图 像 的 平 铺 模式 。 该 属性 设置 是 否 以 及 如 何 重 复 背 景 图 像 。 
默认 情况 下 ， 背 景 图 像 在 水 平和 垂直 方向 上 重复 。 需 要 注意 的 是 ， 背 景 图 像 的 位 置 是 根据 
background-position 属性 设置 的 。 如 果 未 指定 background-position 属性 ， 图 像 会 被 放置 在 元 素 
的 左上 角 。 该 属性 的 语法 格式 如 下 : 
background-repeat: 重 复方 式 ; 
其 中 ，“ 重 复方 式 ” 可 以 取 如 下 值 : 
e repeat: 默认 。 背 景 图 像 将 在 垂直 方向 和 水 平方 向 上 重复 。 
e repeat-x: 背景 图 像 将 在 水 平方 向 上 重复 。 
e repeat-y: 背景 图 像 将 在 垂直 方向 上 重复 。 
e no-repeat: 背景 图 像 将 仅 显 示 一 次 。 
例如 ， 以 下 代码 将 在 水 平和 垂直 方向 上 重复 背景 : 
background-image: ur(img/2 png); 
background-repeat: repeat 
如 果 要 在 水 平方 向 上 重复 背景 ， 代 码 如 下 : 
background-repeat: repeat-x 
要 在 垂直 方向 上 重复 背景 ， 那 么 background-repeat 属性 取 值 为 repeat-y。 要 想 让 背景 图 
像 只 显示 一 次 ， 那 么 background-repeat 取 值 为 no-repeat。 


14.5.6 background-clip 属性 





background-clip 属性 用 于 规定 背景 的 绘制 区 域 。 该 属性 的 语法 格式 如 下 : 
a 
其 中 ，border-box 指 的 是 背景 被 裁剪 到 边框 盒 ， padding-box 指 的 是 背景 被 裁剪 到 内 边 距 
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框 ，content-box 指 的 是 背景 被 裁剪 到 内 容 框 。 
【 例 14-12】 裁 切 背景 图 像 。 
<!DOCTYPE html> 
<html> 
<head> 
«meta charset-"utf-8" /> 
<title>background-clip 属性 的 使 用 </title> 
<style> 
divi 
width: 300px: 
height: 300px; 
padding: 50px; 
background-color: yellow: 
background-clip: content-box; 
border: 2px solid #92b901; 


<div> 
裁 切 背景 。 裁 切 背 景 。 裁 切 背景 。 裁 切 背景 。 裁 切 背 景 。 裁 切 背 景 。 裁 切 背景 。 裁 切 
ER RIER. RUER RUER RUER. RER RUER RER. RIER. RI 
TOR. RIER. RUER RUER RUER. RER RUER RER. RIER. RI 
背景 。 裁 切 背景 。 裁 切 背 景 。 裁 切 背 景 。 裁 切 背景 。 裁 切 背 景 。 裁 切 背 景 。 裁 切 背 景 。 裁 切 背 景 。 裁 切 
HR RUER. RUER. RIER. RER RUER RUER RIER. RIER. RI 
TOR. RUER RUER RIER RUER. RUER RUER. RIES. RIES. RI 
TOR. RUER RUER. RIER RUER. RUER RIER. RER RIER RI 
TES RUER RUER. RER. RIER 
</div> 
</body> 
</html> 


运行 以 上 程序 ， 效 果 如 图 14-14 所 示 。 从 效果 图 可 知 ， 黄 色 背 景 只 裁 切 到 内 容 框 边 界 ， 
超出 边框 的 文字 则 没有 背景 颜色 。 


ATER. MID. MODUS. MID 














图 14-14 RIER 
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14.5.7  background-attachment 属性 











background-attachment. 属性 用 于 设置 背景 图 像 是 否 固定 或 随 着 页 面 的 其 余部 分 滚动 。 该 
属性 的 语法 格式 如 下 : 
background-attachment: 固定 方式 : 
其 中 ， 有 两 种 固定 方式 ， 分 别 是 : scroll， 背 景 图 像 会 随 着 页 面 其 余部 分 的 滚动 而 移动 ， 
scroll 为 默认 值 fxed， 当 页 面 的 其 余部 分 滚动 时 ， 背 景 图 像 不 会 移动 。 
例如 ， 以 下 示例 代码 可 以 将 背景 图 像 固定 住 : 
background-image:url(img/2 png); 
background-repeat:no-repeat; 
background-attachment:fixed 
j 
上 述 示例 代码 将 背景 图 像 的 平 铺 方式 设置 为 不 平 铺 ,然后 将 背景 图 像 设 置 为 不 跟随 内 容 
的 滚动 而 滚动 。 











146 本 章 小 结 


CSS3 中 新 增 的 关于 背景 和 边框 的 一 些 属 性 ， 彻 底 改变 了 过 去 CSS 只 可 以 制作 简单 效果 
的 背景 和 边框 的 局 面 。 过 去 ， 受 CSS2 技术 限制 ， 如 果 需 要 做 一 些 效果 比较 丰富 的 背景 和 边 
框 ， 就 需要 设计 师 通 过 PhotoShop 去 设计 图 片 ， 然 后 通过 CSS 代码 将 图 片 导 入 网 页 ， 作 为 背 
景 和 边框 效果 图 片 。CSS3 中 这 些 新 增 的 背景 和 边框 属性 可 以 增强 元 素 边框 和 背景 样式 的 控制 
能 力 ， 新 增 了 不 少 UI 特性 ， 包 括 border-image、border-radius、box-shadow LJ background 
系列 属性 。 


14.7 思考 和 练习 


1. 在 CSS3 中 ， 使 用 哪个 属性 来 设置 多 色 边框 ?请 举例 说 明 。 
2. 在 CSS3 中 ， 使 用 哪个 属性 来 设置 边框 背景 ? 请 举例 说 明 。 
3. border-radius 属性 的 作用 是 什么 ? 请 举例 说 明 。 

4. box-shadow 属性 的 作用 是 什么 ? 请 举例 说 明 。 

5. 请 列 出 CSS3 中 可 以 用 来 设计 背景 的 属性 。 




















第 15 章 ”变形 处 理 


在 CSS3 中 ， 可 以 使 用 变形 功能 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 斜 和 移动 这 4 种 类 型 


的 变形 处 理 。 在 变形 处 理 中 ， 会 用 到 deg 这 个 单位 ， 这 是 一 种 角度 单位 。 旋 转 操作 通过 使 




















rotate 方法 来 实现 。 缩 放 操作 通过 使 用 scale 方法 来 实现 。 倾 斜 操作 通过 使 用 skew 方法 来 实 
现 。 移 动 操作 通过 使 用 translate 方法 来 实现 。 在 使 用 变形 功能 实现 变形 操作 时 ， 可 以 指定 变 
形 的 基准 点 。 

本 章 学 习 目标 : 


掌握 CSS3 中 变形 功能 的 使 用 方法 ,能 够 使 用 变形 功能 来 实现 文字 或 图 像 的 旋转 、 缩 
放 、 倾 斜 和 移动 

能 够 将 旋转 、 缩 放 、 倾 斜 和 移动 这 4 种 变形 效果 结合 使 用 ， 并 知道 使 用 的 先后 顺序 
不 同 ， 页 面 显 示 结 果 会 有 什么 样 的 区 别 

掌握 3D 变形 功能 的 概念 和 实现 方法 

掌握 变形 矩阵 的 基本 概念 和 使 用 方法 


15.1 认识 transform 属性 


在 CSS3 中 ， 使 用 transform 属性 来 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 斜 、 移 动 这 4 种 类 
型 的 变形 处 理 。 


旋转 : 通过 在 样式 代码 中 使 用 transform: rotate(45deg) 语 句 使 元 素 顺 时 针 旋 转 45^. deg 
是 在 CSS3 的 Values and Units 模块 中 定义 的 一 个 角度 单位 。 

缩放 : 通过 scale 方法 来 实现 文字 或 图 像 的 缩放 处 理 , 在 参数 中 指定 缩放 倍数 。 例如， 
transform: scale(0.5) 表 示 使 元 素 缩小 50%。 

倾斜 : 通过 skew 来 实现 文字 或 图 像 的 倾斜 处 理 ， 在 参数 中 分 别 指定 水 平方 向 上 的 倾 
斜 角度 与 垂直 方向 上 的 倾斜 角度 。 例 如 ，skew(30deg.30deg) 表 示 水 平方 向 上 倾斜 30 
度 ， 垂 直方 向 上 倾斜 30"。 另 外 ，skew 方法 的 两 个 参数 可 以 修改 成 只 使 用 一 个 参数 ， 
省 略 另 一 个 参数 (这 种 情况 被 视 为 只 在 水 平方 向 上 进行 倾斜 ， 在 垂直 方向 上 不 倾斜 )。 

移动 : 通过 translate 方法 对 文字 或 图 像 进行 移动 , 在 参数 中 分 别 指定 水 平方 向 上 的 移 
动 距离 与 垂直 方向 上 的 移动 距离 。 例 如 ，transform:translate($S0px, 50px) 表 示 水 平方 向 
上 移动 50 个 像素 ， 垂 直方 向 上 移动 50 个 像素 。 另 外 ，translate 方法 中 的 两 个 参数 也 
可 以 修改 成 只 使 用 一 个 参数 ， 省 略 另 一 个 参数 (这 种 情况 被 视 为 只 在 水 平方 向 上 进行 
移动 ， 在 垂直 方向 上 不 移动 )。 

指定 变形 的 基准 点 : 默认 情况 下 ， 使 用 transform 方法 进行 文字 或 图 像 的 变形 时 ， 以 
元 素 的 中 心 为 基准 点 。 使 用 transform-origin 属性 可 以 改变 变形 的 基准 点 。 





需要 注意 的 是 ，Firefox 浏览 器 需要 书写 成 -moz-transform; Safari 或 Chrome 浏览 器 需要 
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写成 -webkit-transform; 使 用 Opera 浏览 器 时 ， 需 要 书写 成 -0-transform。 


152 2D 变形 


在 CSS3 中 ， 可 以 使 用 变形 功能 实现 4 种 文字 或 图 像 的 变形 处 理 ， 分 别 是 旋转 、 缩 放 、 
倾斜 以 及 移动 。 本 节 主 要 介绍 2D 变形 有 关 的 功能 。 














15.2.1 旋转 
旋转 通过 rotate 方法 来 实现 ， 使 用 格式 如 下 : 
rotate(<angle>); 
通过 指定 的 angle 参数 对 元 素 进行 2D 旋转 ， 在 此 之 前 需要 先 指定 transform-origin 属性 ， 
transform-origin 属性 定义 的 是 旋转 的 基点 。angle 参数 设置 为 正 数 ， 表 示 顺 时 针 旋 转 ， 设 置 为 


负数 ， 表 示 逆 时 针 旋 转 ， 如 transform:rotate(30deg). 
例 15-1 是 一 个 使 用 transform 属性 实现 变形 的 简单 例子 。 在 该 例 中 ， 有 一 个 绿色 的 div 
元 素 ， 通 过 在 样式 代码 中 使 用 transform:rotate(60deg) 语 句 使 该 div 元 素 顺 时 针 旋转 60”。 
【 例 15-1】 一 个 简单 的 变形 示例 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>transform 示例 </title> 
<style> 
div{ 
width:400px: 
margin: 150px auto; 
background-color: green; 
text-align: center; 
transform: rotate(60deg); 
} 
</style> 
</head> 


<div> 变 形 处 理 </div> 
</body> 
<html> 


运行 以 上 代码 ， 效 果 如 图 15-1 所 示 。 
1522 缩放 


缩放 有 3 种 情况 : scaleGx.y) 使 元 素 在 水 平方 向 和 垂直 方向 同 
时 缩放 (也 就 是 义 轴 和 YY 轴 同 时 缩放 ); scaleX(x) 使 元 素 仅 水 平方 
向 缩放 (X 轴 缩 放 );， scaleY(y) 使 元 素 仅 垂直 方向 缩放 (Y 轴 缩 放 )， 
但 它们 具有 相同 的 缩放 中 心 点 和 基数 , 其 中 心 点 就 是 元 素 的 中 心 。 图 15-1 简单 的 旋转 操作 
位 置 ， 缩 放 基 数 为 1。 如 果 缩 放 基数 大 于 1， 元 素 就 放大 ， 反 之 
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元 素 就 缩小 。 下 面具 体 来 看 看 这 3 种 情况 : 
transform:scale(2,1.5); /水 平方 向 放大 2 倍 ， 垂 直方 向 放大 1.5 倍 
transform:scaleX(2); /水 平方 向 放大 2 fi 
transform:scaleY (2); // 重 直方 向 放大 2 倍 
在 CSS3 中 使 用 scale 方法 来 实现 文字 或 图 像 的 缩放 处 理 , 在 参数 中 指定 缩放 倍率 。 例 如 ， 
scale(0.5) 表 示 缩 小 50%。 例 15-2 是 使 用 scale 方法 实现 缩放 处 理 的 一 个 例子 ， 其 中 有 一 个 div 
元 素 ， 使 用 scale 方法 使 该 div 元 素 缩小 一 半 。 
【 例 15-2】 缩小 元 素 。 
该 例 的 HTML 代码 与 例 15-1 相同 。CSS 样式 代码 如 下 : 
div ( 
width: 250px; 
background-color: pink; 
text-align: center; 
-webkit-transform: scale(0.5); — /# 兼 容 Chrome, Safari*/ 
-moz-transform: scale(0.5); /* MEE Firefox*/ 
-o-transform: scale(0.5); /* XERE Opera*/ 




















j 
运行 以 上 程序 ， 效 果 如 图 15-2 所 示 ， 可 以 看 到 ，div 元 素 被 缩小 了 一 半 。 另 外 ， 还 可 以 分 别 
指定 元 素 在 水 平方 向 和 垂直 方向 的 放大 倍数 。 例 如 ， 把 以 上 代码 修改 成 以 下 样式 代码 ， 使 水 平方 
向 缩小 一 半 、 垂 直方 向 放大 一 倍 ， 修 改 后 重新 运行 该 例 ， 结 果 如 图 15-3 所 示 。 


div{ 
width: 250px: 
background-color: pink: 
text-align: center; 
-webkit-transform: scale(0.5.2); /*3 7€ Chrome, Safari*/ 
-moz-transform: scale(0.5,2); /* JER Firefox*/ 
-o-transform: scale(0.5,2); /* IERE Opera*/ 
) 
/ 
变形 处 理 
图 15-2 缩放 变形 图 15-3 ”在 水 平和 垂直 方向 分 别 进 行 缩放 的 效果 
1523 移动 


文字 或 图 像 的 移动 通过 translate 方法 来 实现 , 和 缩放 类 似 , 也 分 为 3 种 情况 : translate(x,y) 
在 水 平方 向 和 垂直 方向 同时 移动 (也 就 是 X 轴 和 YY 轴 同 时 移动 ); translateX(x) 仅 在 水 平方 向 移 
动 (X 轴 移 动 ); translateY(Y) 仅 在 垂直 方向 移动 (Y 轴 移 动 )。 具 体 使 用 方法 如 下 : 
transform:translate(100px,20px); /水 平方 向 移动 100 像素 ， 垂 直方 向 移动 20 像素 
transform:translateX(100px); /水 平方 向 移动 100 像素 
transform:translateY(20px); /垂直 方向 移动 20 像素 
下 面 是 移动 操作 的 一 个 示例 ， 该 例 有 一 个 div 元 素 ， 通 过 translate 方法 使 元 素 在 水 平方 
向 上 移动 50px， 在 垂直 方向 上 移动 50px。 
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【 例 15-3】 移动 元 素 。 


} 


width: 250px: 

margin: 150px auto; 

background-color: pink; 

text-align: center; 

-webkit-transform: translate(50,50); /*3£7 Chrome, Safari*/ 
-moz-transform: translate(50,50); — /# 兼 容 Firefox*/ 
-o-transform: translate(50,50); I*R Opera*/ 


</style> 
</head> 


<div> 变 形 处 理 </div> 
</body> 
运行 程序 ， 效 果 如 图 15-4 所 示 。 


变形 处 理 
图 15-4 移动 元 素 


1524 扭曲 


扭曲 有 时 候 也 称 为 倾斜 操作 ,通过 skew 方法 来 实现 。 和 translate, scale 方法 一 样 ，skew 
方法 也 有 3 种 情况 : skew(x,y) 使 元 素 在 水 平和 垂直 方向 同时 扭曲 (X 轴 和 YY 轴 同 时 按 一 定 的 角 
度 进行 扭曲 变形 )，skewX(x) 仅 使 元 素 在 水 平方 向 扭曲 变形 (X 轴 扭 曲 变 形 )，skewY(y) 仅 使 元 
素 在 垂直 方向 扭曲 变形 (Y 轴 扭 曲 变 形 )。 具 体 使 用 方法 如 下 : 
transform:skew(30deg, 10deg); /水 平和 垂直 方向 各 扭曲 30 度 、10 度 
transform:skewX(30deg); /水 平方 向 扭曲 30 度 
transform:skewY(10deg): / 重 直 方向 扭曲 10 度 
【 例 15-4】 扭曲 元 素 。 
<style> 


div{ 


width: 250px; 

margin: 150px auto; 

background-color: pink; 

text-align: center; 

-webkit-transform: skew(30deg.30deg): 。 /# 兼 容 Chrome. Safari*/ 
-moz-transform:skew(30deg.30deg): /# 兼 容 Firefox*/ 
-o-transform: skew(30deg,30deg); /# 兼 容 Opera*/ 


<div> 变 形 处 理 <div> 
</body> 
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运行 以 上 程序 ， 效 果 如 图 15-5 所 示 。 该 例 通过 skew 方法 将 一 个 div 元 素 在 水 平方 向 向 
上 倾斜 30”， 在 垂直 方向 向 上 倾斜 30”。 


AS 


图 15-5 扭曲 效果 
1525 ”复杂 变形 


1. 对 一 个 元 素 使 用 多 种 变形 方法 

上 一 节 介 绍 了 使 用 transform 元 素 对 文本 或 图 像 进行 旋转 、 缩 放 、 移动 和 扭曲 的 操作 ， 本 
节 介 绍 如 何 综合 使 用 这 几 种 方法 来 对 一 个 元 素 使 用 多 重 变形 。 

首先 来 看 两 个 示例 。 例 15-5 对 元 素 先 移动 ， 然 后 旋转 ， 最 后 缩放 ; 例 15-6 对 元 素 先 
旋转 ， 然 后 缩放 ， 最 后 移动 。 这 两 个 示例 是 对 同一 个 页 面 中 同一 个 元 素 进行 多 重 变形 ， 而 
且 在 各 种 变形 方法 中 使 用 的 参数 也 都 相同 ， 旋 转 时 都 是 顺 时 针 旋转 45”,， 缩放 时 都 是 将 元 素 
放大 1.5 倍 ， 移 动 时 都 是 向 右 移动 150px、 向 下 移动 200px。 这 两 个 示例 的 差别 仅仅 在 于 使 用 
3 种 变形 方法 的 先后 顺序 不 一 样 。 

【 例 15-5】 综合 变形 示例 : 先 移 动 ， 然 后 旋转 ， 最 后 缩放 。 


<head> 
<meta charset="UTF-8"> 
<title> 综 合 示例 1</title> 
<style> 
div{ 
width: 250px; 
background-color: pink: 
text-align: center; 
-webkit-transform: translate(150px.200px) rotate(45deg) scale(1.5); 兼容 Chrome、Safari*/ 
-moz-transform:translate(150px.200px) rotate(45deg) scale(1.5); — /* 兼 容 Firefox*/ 
-o-transform: translate(150px.200px) rotate(45deg) scale(1.5); /# 兼 容 Opera*/ 
</style> 
<head> 
<body> 
<div> 变 形 处 理 </div> 
</body> 


运行 以 上 程序 ， 效 果 如 图 15-6 所 示 。 
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图 15-6 程序 运行 效果 图 (一 ) 


【 例 15-6】 综合 变形 示例 ， 先 旋转 ， 然 后 缩放 ， 最 后 移动 。 
<head> 
<meta charset="UTF-8"> 
<title> 综 合 示 例 1</title> 
<style> 
div{ 
width: 250px; 
background-color: pink; 
text-align: center; 
-webkit-transform:rotate(45deg) scale(1.5) translate(150px.200px); /+ 兼容 Chrome. Safari*/ 
-moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);  /* JEZ Firefox*/ 
-o-transform:rotate(45deg) scale(1.5) translate(150px,200px); /* ET Opera*/ 
) 
<style> 
</head> 


<div> 变 形 处 理 </div> 
</body> 
运行 以 上 程序 ， 效 果 如 图 15-7 Bras. 


D 综合 示例 1 x 
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图 15-7 程序 运行 效果 图 (二 ) 
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2. 指定 变形 的 基准 点 
在 使 用 transform 元 素 进行 文字 或 图 像 变形 时 ， 是 以 元 素 的 中 心 点 为 基准 进行 的 。 使 / 
transform-origin 属性 ， 可 以 改变 变形 的 基准 点 。 
在 下 面 的 示例 中 有 两 个 div 元 素 ， 首 先 不 改变 变形 的 基准 点 ， 并 且 对 第 二 个 div 元 素 进 
行 旋转 。 
【 例 15-7】 不 改变 变形 的 基准 点 ， 直 接 进行 变形 操作 。 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 综 合 示例 1</title> 
<style> 
div{ 
width: 100px; 
height: 100px; 
display: inline-block: 



































} 
div#first{ 
background-color: darkseagreen; 
} 
div#second{ 
background-color: royalblue; 
transform: rotate(45deg); 
) 
</style> 
</head> 
<body> 
«div id="first"></div> 
<div id="second"></div> 
</body> 
</html> 
运行 以 上 程序 ， 效 果 如 图 15-8 所 示 。 
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图 15-8 不 改变 变形 的 基准 点 ， 进 行 变 形 操作 


【 例 15-8】 先 改 变 变形 的 基准 点 ， 再 进行 变形 操作 。 
<head> 
«meta charset="UTF-8"> 
<title> 综 合 示例 2</title> 
<style> 
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div( 
width: 100px; 
height: 100px; 
display: inline-block; 
} 
divéfirst( 
background-color: darkseagreen; 
} 
divésecond( 
background-color: royalblue; 
transform: rotate(45deg); 
transform-origin: left bottom; 
} 
</style> 
</head> 
<body> 
«div id="first"></div> 
<div id="second"></div> 
</body> 
运行 以 上 程序 , 效果 如 图 15-9 所 示 。 指 定 transform-origin 属性 的 值 时 ， 需 要 分 别 指定 基 
准点 在 元 素 水 平方 向 和 垂直 方向 上 的 位 置 。 其 中 ， 元 素 水 平方 向 上 的 位 置 可 以 是 left、center 
和 right， 元 素 垂直 方向 上 的 位 置 可 以 是 top、center 和 bottom。 
感到 
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图 15-9 ”修改 变形 的 基准 点 后 的 变形 效果 


153 3D 变形 


3D 变形 使 用 基于 2D 变形 的 相同 属性 ， 熟 悉 2D 变形 的 开发 人 员 会 发 现 ，3D 变形 的 功 
能 和 2D 变形 的 功能 相当 类 似 。CSS3 中 的 3D 变形 主要 包括 以 下 几 种 功能 函数 : 

e 3D 位 移 : 主要 包括 translateZ( ) 和 translate3d( ) 两 个 功能 函数 。 

e 3D 旋转 : 主要 包括 rotateX( )、rotateY( )、rotateZ( ) 和 rotate3d( ) 四 个 功能 函数 。 

e 3D 缩放 : 主要 包括 scaleZ() 和 scale3d( ) 两 个 功能 函数 。 

e 3D 和 矩阵， 和 2D 变形 一 样 ， 有 一 个 3D 矩阵 功能 函数 matrix3d( )。 
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15.3.4. 3D 位 移 


1E CSS3 中 ，3D 位 移 操作 主要 通过 translateZ( ) 和 translate3d( ) 两 个 函数 来 实现 。 其 中 ， 
translate3d( ) 函 数 使 元 素 在 三 维 空间 内 移动 。 基 本 语法 如 下 : 
translate3d(tx.ty.tz); 
其 中 ， 各 参数 取 值 说 明 如 下 : 
e x: 代表 横向 坐标 位 移 向 量 的 长 度 。 
e ty: 代表 纵向 坐标 位 移 向 量 的 长 度 。 
e tz: 代表 乙 轴 位 移 向 量 的 长 度 。 不 能 是 一 个 百分比 值 ， 如 果 取 值 为 百分比 值 ， 将 被 认 
为 是 无 效 值 。 
这 种 3D 位 移 处 理 的 特点 是 : 使 用 三 维 向 量 的 坐标 定义 元 素 在 每 个 方向 移动 多 少 。 在 
translatesd( ) 函 数 中 ，X、Y、Z 轴 上 的 变化 规律 如 下 : 
e Xll: 从 左 向 右 移动 。 
e Yl: 从 上 向 下 移动 。 
e Zil: 以 方 框 中 心 为 原点 变 大 。 
随 着 移动 距离 的 增加 ， 直 观 效果 如 图 15-10 所 示 。 从 图 15-10 中 的 效果 可 以 看 出 ， 当 Z 
轴 的 值 越 大 时 ， 元 素 也 离 观看 者 更 近 ， 从 视觉 上 元 素 就 变 得 更 大 ， 反 之 ， 值 越 小 时 ， 元 素 也 
离 观看 者 更 远 ， 从 视觉 上 元 素 就 变 得 更 小 。 


ranslate7 (60px) 





图 15-10 移动 距离 增加 时 的 效果 


【 例 15-9】 使 用 translate3d( ) 函 数 实现 3D 移动 处 理 。 
首先 设计 如 下 HTML 页 面 代码 : 
«div class="stage s1"> 
«div class="container"> 
<img src="img/timg.png" alt="" width="70" height="100" /> <img src="img/timg.png" alt-"" 
width="70" height="100" /> </div> 
</div> 
<div class="stage s2"> 
<div class="container"> 
<img src-"img/timg.png" alt=" width="70" height="100" /> <img sre="img/fimg png" alt-"" 
width-"70" height="100" /> </div> 
</div> 
然后 设计 如 下 CSS 代码 : 
<style> 
stage { 


*262* 


HTML5+CSS3 网 页 设计 基础 教程 








width: 300px; 

height: 300px; 

float: left; 

margin: 15px; 

position: relative; 
background: url(img/bg.jpg) repeat center center; 
-webkit-perspective: 1200px: 
-moz-perspective: 1200px: 
-ms-perspective: 1200px; 
-o-perspective: 1200px: 
perspective: 1200px: 


.container { 


position: absolute; 

top: 5096; 

left: 5096; 

-webkit-transform-style: preserve-3d: 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d: 
-o-transform-style: preserve-3d; 
transformestyle: preserve-3d; 


.container img { 


position: absolute; 
margin-left: -35px; 


margin-top: -50px; 


„container img:nth-child(1) { 


z-index: 1; 
opacity: .6; 


-s1 img:nth-child(2) { 


z-index: 2; 

-webkit-transform: translate3d(30px, 30px, 200px); 
-moz-transform: translate3d(30px, 30px, 200px); 
-ms-transform: translate3d(30px, 30px, 200px); 
-o-transform: translate3d(30px, 30px, 200px); 
transform: translate3d(30px, 30px, 200px); 


-s2 img:nth-child(2) { 


z-index: 2; 
-webkit-transform: translate3d(30px, 30px, -200px); 
-moz-transform: translate3d(30px, 30px, -200px); 
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-ms-transform: translate3d(30px, 30px, -200px); 
-o-transform: translate3d(30px, 30px, -200px): 
transform: translate3d(30px, 30px, -200px): 
} 
</style> 
运行 以 上 程序 ， 效 果 如 图 15-11 所 示 。 


[ 
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图 15-11 3D 位 移 效 果 


在 CSS3 中 ,除了 translate3d( ) 函 数 之 外 , 还 有 translateZ( ) 函 数 可 以 实现 3D 位 移 。translateZ( ) 
函数 的 功能 是 ， 让 元 素 在 3D 空间 中 沿 Z 轴 进 行 位 移 。 语 法 格式 如 下 : 

translate(t); 

t 参 数 指 的 是 Z 轴 位 移 向 量 的 长 度 。 该 函数 可 以 让 元 素 在 Z 轴 进 行 位 移 ， 值 为 负 值 时 ， 元 
RE Z 轴 越 移 越 远 ， 导 致 元 素 变 得 较 小 :反之 ， 值 为 正 值 时 ， 元 素 在 Z 轴 越 移 越 近 ， 导 致 元 素 
变 得 较 大 。 在 例 15-8 的 基础 上 ， 稍 加 变化 ， 将 translate3d( ) 函 数 替换 成 ranslateZ( ) 函 数 ， 

-s1 img:nth-child(2) ( 

z-index: 2; 
opacity: .6; 
-webkit-transform: translateZ(200px); 
-moz-transform: translateZ(200px): 
-ms-transform: translateZ(200px); 
-o-transform: translateZ(200px): 
transform: translateZ(200px): 

3 

.s2 img:nth-child(2) { 
z-index: 2; 
-webkit-transform: translateZ(-200px): 
-moz-transform: translateZ(-200px): 
-ms-transform: translateZ(-200px): 
-o-transform: translateZ(-200px); 
transform: translateZ(-200px): 

È 

运行 程序 ， 效 果 如 图 15-12 所 示 。 
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图 15-12 (JH translate Z( ) 函 数 的 效果 


运行 效果 再 次 证 明 : translateZ( ) 函 数 仅 让 元 素 在 Z 轴 进 行 位 移 。 值 越 大 时 ， 元 素 离 观看 
者 越 近 ， 视 觉 上 元 素 放 大 ， 反 之 元 素 缩小 。 

translateZ( ) 函 数 在 实际 使 用 中 等 同 于 translate3d(0.0,tz)。 仅 从 视觉 效果 上 看 ，translateZ( ) 
和 translate3d(0,0,tz) 函 数 的 功能 非常 类 似 于 二 维 空间 的 scale( ) 缩 放 函 数 ， 但 实际 上 完全 不 同 。 
translateZ( ) 和 translate3d(0,0,tz) 变 形 发 生 在 Z 轴 上 ， 而 不 是 义 轴 和 YY 轴 。 当 使 用 3D 变形 时 ， 
能 够 在 Z 轴 上 移动 元 素 确实 有 很 大 的 好 处 ， 比 如 在 创建 3D 立方 体 的 盒子 时 。 


15.3.23 3D 旋转 


在 三 维 变形 中 ， 可 以 让 元 素 在 任何 轴 上 旋转 。CSS3 新 增 了 3 个 旋转 函数 :rotateX( )、 
rotateY( ) 和 rotateZ( )。rotateX( ) 函 数 允 许 元 素 围 绕 X 轴 旋 转 ，rotateY( ) 函 数 允 许 元 素 围绕 Y 
轴 旋 转 ，rotateZ() 函 数 允 许 元 素 围绕 乙 轴 旋 转 。 接 下 来 简单 介绍 这 3 个 旋转 函数 。 

rotateX( ) 函 数 指定 元 素 围绕 X 轴 旋 转 ， 旋 转 的 量 被 定义 为 指定 的 角度 。 如 果 值 为 正 值 ， 
元 素 围绕 XX 轴 顺 时 针 旋转 ; 反之 , 如 果 值 为 负 值 , 元 素 围绕 XX 轴 逆 时 针 旋 转 。 基 本 语法 如 下 : 

rotateX(a) 

其 中 ，a 是 旋转 角度 值 ， 可 以 是 正 值 ， 也 可 以 是 负 值 。 

rotateY( ) 函 数 指定 元 素 围 绕 Y 轴 旋 转 ， 旋 转 的 量 被 定义 为 指定 的 角度 。 如 果 角 度 值 为 正 
值 ， 元 素 围 绕 Y 轴 顺 时 针 旋 转 ， 反 之 ， 如 果 角 度 值 为 负 值 ， 元 素 围绕 Y 轴 逆 时 针 旋 转 。 基 本 
语法 如 下 : 

TotateY(a) 

其 中 ，a 是 旋转 角度 值 ， 可 以 是 正 值 ， 也 可 以 是 负 值 。 

rotateZ( ) 函 数 和 其 他 两 个 函数 的 功能 一 样 ， 区 别 在 于 rotateZ( ) 函 数 指定 元 素 围绕 Z 轴 旋 
转 。 基 本 语法 如 下 : 

rotateZ(a) 

rotateZ( ) 函 数 指定 元 素 围绕 Z 轴 旋 转 ， 如 果 仅 从 视觉 角度 看 ，rotateZ( ) 函 数 让 元 素 顺 时 
针 或 逆 时 针 旋 转 ， 并 且 效 果 和 rotate( ) 函 数 的 效果 相同 ， 但 不 是 在 2D 平面 内 旋转 。 

在 三 维 空间 中 ， 除 了 rotateX( )、rotateY( ) 和 rotateZ( ) 函 数 可 以 让 一 个 元 素 在 三 维 空间 中 
旋转 之 外 ， 还 有 rotate3d( ) 函 数 。 在 三 维 空间 中 ， 旋 转 由 三 个 自由 度 来 描述 一 个 转动 轴 。 轴 的 
旋转 是 由 一 个 [xyz] 向 量 并 经 过 元 素 原 点 。 其 基本 语法 如 下 : 
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rotate3d(x.y.za) 








其 中 ， 各 参数 作用 如 下 : 














x 是 一 个 介 于 0、1 之 间 的 数值 ， 主 要 用 来 描述 元 素 围绕 义 轴 旋转 的 矢量 值 。 
y 是 一 个 介 于 0、1 之 间 的 数值 ， 主 要 用 来 描述 元 素 围绕 Y 轴 旋 转 的 矢量 值 。 
z 是 一 个 介 于 0、1 之 间 的 数值 ， 主 要 用 来 描述 元 素 围 绕 Z 轴 旋转 的 矢量 值 。 
a 是 一 个 角度 值 ， 主 要 用 来 指定 元 素 在 三 维 空间 中 旋转 的 角度 。 如 果 为 正 值 ， 元 素 顺 
时 针 旋 转 ， 反 之 ， 元 素 逆 时 针 旋 转 。 












































下 面 介绍 的 3 个 旋转 函数 功能 相同 : 


rotateX(a) 函 数 的 功能 等 同 于 rotate3d(1.0.0.a)。 
rotateY(a) 函 数 的 功能 等 同 于 rotate3d(0.1.0.a)。 
IotateZ(a) 函 数 的 功能 等 同 于 rotate3d(0.0,1,a)。 


接 下 来 通过 一 个 简单 的 示例 ， 介 绍 一 下 各 个 3D 旋转 函数 的 应 用 。 
【 例 15-10】 3D 旋转 示例 。 
首先 ， 设 计 如 下 HTML 页 面 : 


然后 ， 设 计 如 下 CSS 代码 : 


«div class-"stage s1"> 
«div class-"container"- 
<img src-"img/timg.png" alt-"" width-"140" height-"200" /> <img src-"img/timg.png" alt-"" 
width-"140" height-"200" /> </div> 
</div> 
<div class="stage s2"> 
<div class="container"> 
<img src-"img/timg.png" alt="" width="140" height="200" /> <img src-"img/timg.png" alt-"" 
width="140" height="200" /> </div> 
</div> 
<div class="stage s3"> 
<div class="container"> 
<img src-"img/timg.png" alt="" width="140" height="200" /> <img src-"img/timg.png" alt="" 
width="140" height="200" /> </div> 
</div> 
<div class="stage s4"> 
<div class="container"> 
<img src-"img/timg.png" alt="" width="140" height="200" /> <img src-"img/timg.png" alt="" 
width="140" height="200" /> </div> 
</div> 


<style> 
„stage { 
width: 300px; 
height: 300px; 
float: left; 
margin: 15px; 
position: relative; 
background:url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) 
repeat center center: 
-webkit-perspective: 1200px: 
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-moz-perspective: 1200px; 
-ms-perspective: 1200px: 
-o-perspective: 1200px: 
perspective: 1200px: 

} 

-container ( 
position: absolute; 
top: 5096; 
left: 5096; 
-webkit-transform-style: preserve-3d: 
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d: 
-o-transform-style: preserve-3d: 
transform-style: preserve-3d; 

) 

.container img { 
position: absolute; 
margin-left: -70px; 
margin-top: -100px: 

} 

.container img:nth-child(1) { 
z-index: 1; 
opacity: .6; 

} 

.sl img:nth-child(2) { 
z-index: 2; 
-webkit-transform: rotateX(45deg): 
-moz-transform: rotateX(45deg); 
-ms-transform: rotateX(A5deg); 
-o-transform: rotateX(A5deg): 
transform: rotateX(45deg); 

} 

.S2 img:nth-child(2) { 
z-index: 2; 
-webkit-transform: rotateY (45deg); 
-moz-transform: rotate Y (45deg); 
-ms-transform: rotateY (45deg); 
-o-transform: rotateY(45deg): 
transform: rotateY (45deg); 

$ 

.s3 img:nth-child(2) { 
z-index: 2; 
-webkit-transform: rotateZ(A5deg); 
-moz-transform: rotateZ(45deg); 
-ms-transform: rotateZ(45deg); 
-o-transform: rotateZ(45deg); 
transform: rotateZ(45deg); 
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-s4 img:nth-child(2) ( 
z-index: 2; 
-webkit-transform: rotate3d(.6, 1, .6, 45deg); 
-moz-transform: rotate3d(.6, 1, .6, 45deg); 
-ms-transform: rotate3d(.6, 1, .6, 45deg); 
-o-transform: rotate3d(.6, 1, .6, 45deg); 
transform: rotate3d(.6, 1, .6, 45deg); 

} 

</style> 
运行 以 上 代码 ， 效 果 如 图 15-13 所 示 。 


|, D some 


| Q | © 127.0.0.1:8020/ch15/15-9.html 











15.3.8 3D 缩放 


在 CSS3 中 ，3D 缩放 处 理 主要 通过 scaleZ( ) 和 scale3d( ) 两 个 函数 来 实现 。 当 scale3d( ) 
中 的 入 轴 和 立轴 同时 为 1( 即 scale3d(1,1,sz)) 时 ， 其 效果 等 同 于 scaleZ(sz)。 通 过 使 用 3D 缩放 
函数 ， 可 以 让 元 素 在 Z 轴 上 按 比例 缩放 。 默 认 值 为 1 ， 当 值 大 于 1 时 ， 元 素 放 大 ; 反之 ， 小 
于 1 且 大 于 0.01 时 ， 元 素 缩小 。 

scale3d( ) 函 数 的 使 用 语法 如 下 : 

scale3d(sx,sy,sz) 

其 中 ， 各 参数 作用 如 下 。 

e sx: 横向 缩放 比例 。 

e sy: 纵向 缩放 比例 。 
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e sz: Z 轴 缩 放 比 例 。 
scaleZ( ) 函 数 的 使 用 语法 如 下 : 


scaleZ(s) 
其 中 ,参数 s 的 作用 是 指定 元 素 每 个 点 在 Z 轴 的 比例 。 例 如 ，scaleZ(-1) 定 义 了 一 个 原点 


TE Z 轴 的 对 称 点 (按照 元 素 的 变换 原点 )。 
scaleZ( ) 和 scale3d( ) 函 数 单独 使 用 时 没有 任何 效果 ， 需 要 配合 其 他 变形 函数 一 起 使 用 才 
会 有 效果 。 下 面 来 看 一 个 示例 ， 为 了 能 看 到 scaleZ( ) 函 数 的 效果 ， 这 里 添加 了 rotateX(45deg) 


功能 : 




















.sl img:nth-child(2) ( 
z-index: 2; 
-webkit-transform: scaleZ(5) rotateX(45deg); 
-moz-transform: scaleZ(5) rotateX(45deg); 
-ms-transform: scaleZ(5) rotateX(45deg): 
-o-transform: scaleZ(5) rotateX(45deg); 
transform: scaleZ(5) rotateX(45deg): 
j} 
-s2 img:nth-child(2) { 
z-index: 2; 
-webkit-transform: scaleZ(.25) rotateX(45deg); 
-moz-transform: scaleZ(.25) rotateX(45deg); 
-ms-transform: scaleZ(.25) rotateX(45deg); 
-o-transform: scaleZ(.25) rotateX(45deg): 
transform: scaleZ(.25) rotateX(45deg): 


i 
运行 后 效果 如 图 15-14 所 示 。 


D apie 
€ ©  12700.1:020/ch15/15-9 





图 15-14 ”使 用 scaleZ( ) 和 scacle3dO 函 数 的 效果 


153.44 3D 变形 兼容 性 
3D 变形 在 实际 使 用 中 同样 需要 添加 各 浏览 器 的 私有 属性 ， 并 且 个 别 属性 在 某 些 主流 浏 
览 器 中 并 未 得 到 很 好 的 支持 : 
e 在 正 10+ 中 ，3D 变形 的 部 分 属性 未 得 到 很 好 的 支持 。 
e Firefox 10.0 £ Firefox 15.0 版 本 的 浏览 器 ,在 使 用 3D 变形 时 需要 添加 私有 属性 -moz-， 
但 从 Firefox 16.0+ 版 本 开始 无 须 添加 浏览 器 私有 属性 。 
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e 在 Chrome 12.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 
e 在 Safari 4.0+ 版 本 中 使 用 3D 变形 时 需要 添加 私有 属性 -webkit-。 
* Opera 15.0+ 版 本 才 开 始 支 持 3D 变形 ， 使 用 之 前 需要 添加 私有 属性 -webkit-。 
e 在 移动 设备 上 , iOS Safari 3.2+、Android Browser 3.0+、 Blackberry Browser 7.0+, Opera 
Mobile 14.0+、Chrome for Android 25.0+ 都 支持 3D 变形 , 但 在 使 用 时 需要 添加 私有 属 
性 -webkit-; Firefox for Android 19.0+ 支 持 3D 变形 ， 但 无 须 添加 浏览 器 私有 属性 。 


1535 ”多重 变形 


在 CSS3 中 , 不 管 是 2D 变形 还 是 3D 变形 ， 都 可 以 使 
隔 ， 具 体 语法 如 下 : 
transform: —transform-function- —transform-function- 
其 中 ，transform-function 是 指 CSS3 中 的 任何 变形 函数 。 

















多 重 变形 ， 它 们 之 间 使 用 空格 分 


下 面 介绍 一 个 通过 多 重 变 形制 作 的 立方 体 ,首先 来 看 一 个 使 用 2D 变形 制作 立方 体 的 示例 。 


【 例 15-11】 使 用 2D 变形 制作 立方 体 。 
首先 ， 设 计 如 下 HTML 代码 : 
<div class-"stage s1"> 
<div class="container"> 
<div class="side top">1</div> 
<div class="side left">2</div> 
<div class="side right">3</div> 


</div> 
</div> 
然后 ， 设 计 如 下 CSS 代码 : 
<style> 
(Q)-webkit-keyframes spin ( 
0% ( 


-webkit-transform: rotateY (0deg); 
transform: rotateY (0deg) 


) 
10096 ( 
-webkit-transform: rotateY (360deg): 
transform: rotateY (360deg) 
} 
} 
@-moz-keyframes spin { 
0%{ 
-moz-transform: rotateY (0deg): 
transform: rotateY (0deg) 
b 
100% ( 
-moz-transform: rotateY (360deg); 
transform: rotateY(360deg) 
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} 
@-ms-keyframes spin { 
096 ( 
-ms-transform: rotateY (0deg): 
transform: rotateY (0deg) 
} 
100% { 
-ms-transform: rotate Y (360deg): 
transform: rotateY(360deg) 


) 
@-o-keyframes spin { 
096 ( 
-o-transform: rotateY (0deg); 
transform: rotateY (0deg) 
j 
100% ( 
-o-transform: rotateY (360deg); 
transform: rotateY(360deg) 
} 
} 
@keyframes spin ( 
096 ( 
transform: rotateY (0deg) 
} 
100% { 
transform: rotateY(360deg) 
} 
} 
.Stage { 
width: 300px; 
height: 300px; 
float: left: 
margin: 15px; 
position: relative; 
-webkit-perspective: 1200px; 
-moz-perspective: 1200px: 
-ms-perspective: 1200px: 
-o-perspective: 1200px: 
perspective: 1200px: 
} 
.Container { 
position: relative; 
height: 230px: 
width: 100px: 
top: 5096; 
left: 50%; 
margin: -100px 0 0 -50px; 
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-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d: 
-ms-transform-style: preserve-3d; 
-o-transform-style: preserve-3d; 
transform-style: preserve-3d; 

) 

.container:hover ( 
-moz-animation: spin 5s linear infinite: 
-o-animation: spin 5s linear infinite; 
-webkit-animation: spin 5s linear infinite; 
animation: spin 5s linear infinite; 

} 

„side { 
font-size: 20px; 
font-weight: bold; 
height: 100px; 
line-height: 100px; 
color: fff. 
position: absolute; 
text-align: center; 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); 
text-transform: uppercase; 
width: 100px: 


-top { 
background: #9acc53; 
-webkit-transform: rotate(-45deg) skew(15deg, 15deg); 
-moz-transform: rotate(-45deg) skew(15deg, 15deg); 
-ms-transform: rotate(-45deg) skew(15deg, 15deg); 
-o-transform: rotate(-45deg) skew(15deg, 15deg); 
transform: rotate(-45deg) skew(15deg, 15deg); 

} 

left { 
background: #8ec63f: 
-webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-5096, 100%); 
-moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-5096, 10096); 
-ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-5096, 100%); 
-o-transform: rotate(15deg) skew(15deg. 15deg) translate(-5096, 10096); 
transform: rotate(15deg) skew(15deg, 15deg) translate(-5096, 10096); 

} 

right ( 
background: 480b239: 
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(5096, 100%); 
-moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(5096, 10096); 
-ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(5096, 100%); 
-o-transform: rotate(-15deg) skew(-15deg. -15deg) translate(5096, 100%); 
transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%); 
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</style> 
运行 以 上 程序 ， 效 果 如 图 15-15 所 示 。 





15-15 ”使 用 2D 变形 制作 的 立方 体 





例 15-11 通过 三 个 面 , 使 用 多 个 2D 变形 制作 一 个 立方 体 , 接 下 来 使 用 3D 多 重 变形 制作 
立方 体 。 
【 例 15-12】 使 用 3D 多 重 变形 制作 立方 体 。 
首先 ， 设 计 如 下 HIML 页 面 : 
«div class="stage"> 
<div class-"container"-- 
<div class-"side front">1</div> 
<div class-"side back">2</div> 
<div class="side left">3</div> 
<div class="side right">4</div> 
<div class="side top">5</div> 
<div class="side bottom">6</div> 
</div> 
</div> 
然后 ， 设 计 如 下 CSS 代码 : 
<style> 





@-webkit-keyframes spin { 
0*o ( 
-webkit-transform: rotateY (0deg): 
transform: rotateY (0deg) 
} 
100% { 
-webkit-transform: rotateY (360deg); 
transform: rotateY(360deg) 
h 
@-moz-keyframes spin ( 
096 ( 
-moz-transform: rotateY (0deg): 
transform: rotateY (0deg) 
H 
100% ( 
-moz-transform: rotate Y (360deg); 
transform: rotateY(360deg) 
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} 
) 
(Q-ms-keyframes spin ( 
0% ( 
-ms-transform: rotate Y (0deg): 
transform: rotateY (0deg) 
} 
100% { 
-ms-transform: rotateY (360deg); 
transform: rotateY(360deg) 
} 
} 
(Q)-o-keyframes spin { 
096 ( 
-o-transform: rotateY (0deg): 
transform: rotateY (0deg) 
j 
100% ( 
-o-transform: rotateY (360deg): 
transform: rotateY (360deg) 
j 
ji 
@keyframes spin { 
0% ( 
transform: rotateY (0deg) 
} 
100% { 
transform: rotateY (360deg) 
j 
} 
.stage { 
width: 300px: 
height: 300px; 
margin: 15px auto; 
position: relative; 
-webkit-perspective: 300px; 
-moz-perspective: 300px: 
-ms-perspective: 300px; 
-o-perspective: 300px; 
perspective: 300px: 
} 
.container { 
top: 5096; 
left: 50%; 
margin: -100px 0 0 -100px: 
position: absolute; 
-webkit-transform: translateZ(-100px): 
-moz-transform: translateZ(-100px): 
-ms-transform: translateZ(- 100px): 
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-o-transform: translateZ(- 100px): 
transform: translateZ(-100px): 
-webkit-transform-style: preserve-3d: 
-moz-transform-style: preserve-3d: 
-ms-transform-style: preserve-3d: 
-o-transform-style: preserve-3d: 
transform-style: preserve-3d; 

) 

.container:hover { 
-moz-animation: spin 5s linear infinite; 
-o-animation: spin 5s linear infinite; 
-webkit-animation: spin 5s linear infinite; 
animation: spin 5s linear infinite; 


„side ( 
background: rgba(142, 198, 63, 0.3); 
border: 2px solid 48ec63f: 
font-size: 60px; 
font-weight: bold; 
color: 2fff; 
height: 196px; 
line-height: 196px; 
position: absolute; 
text-align: center; 
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); 
text-transform: uppercase; 
width: 196px; 

j 

-front ( 
-webkit-transform: translateZ(100px): 
-moz-transform: translateZ(100px); 
-ms-transform: translateZ(100px); 
-o-transform: translateZ(100px): 
transform: translateZ(100px); 


.back ( 
-webkit-transform: rotateX(180deg) translateZ( 100px); 
-moz-transform: rotateX(180deg) translateZ(100px): 
-ms-transform: rotateX(180deg) translateZ(100px); 
-o-transform: rotateX(180deg) translateZ(100px): 
transform: rotateX(180deg) translateZ(100px): 


left ( 
-webkit-transform: rotateY (-90deg) translateZ(100px): 
-moz-transform: rotateY (-90deg) translateZ(100px); 
-ms-transform: rotateY (-90deg) translateZ(100px): 
-o-transform: rotateY (-90deg) translateZ(100px): 
transform: rotateY (-90deg) translateZ(100px): 
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Tight { 
-webkit-transform: rotateY(90deg) translateZ(100px); 
-moz-transform: rotateY (90deg) translateZ(100px); 
-ms-transform: rotateY (90deg) translateZ(100px); 
-o-transform: rotateY (90deg) translateZ(100px): 
transform: rotateY (90deg) translateZ(100px): 


«top ( 
-webkit-transform: rotateX(90deg) translateZ(100px): 
-moz-transform: rotateX(90deg) translateZ(100px); 
-ms-transform: rotateX(90deg) translateZ(100px); 
-o-transform: rotateX(90deg) translateZ(100px); 
transform: rotateX(90deg) translateZ(100px); 

} 

-bottom { 
-webkit-transform: rotateX(-90deg) translateZ(100px); 
-moz-transform: rotateX(-90deg) translateZ(100px); 
-ms-transform: rotateX(-90deg) translateZ(100px): 
-o-transform: rotateX(-90deg) translateZ(100px): 
transform: rotateX(-90deg) translateZ(100px): 

} 

</style> 
运行 以 上 程序 ， 效 果 如 图 15-16 所 示 。 





图 15-16 使 用 3D 变形 制作 的 立方 体 
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矩阵 函数 matrix( ) 和 matrix3d( ) 是 理解 CSS3 中 变形 处 理 技术 的 关键 。 大 多 数 时 候 , 可 以 
直接 使 用 rotate( ) 和 skewY( ) 之 类 的 方法 来 实现 变形 处 理 , 这 些 变形 方法 的 背后 都 对 应 着 一 个 





变形 矩阵 。 因 此， 理解 变形 矩阵 的 工作 原理 对 于 理解 变形 处 理 很 关键 。 














CSS 变形 建立 在 线性 代数 和 几何 知识 的 基础 上 ， 因 此 会 涉及 一 些 高 等 数学 知识 ， 如 果 有 


一 定 的 数学 基础 ， 将 有 助 于 理解 CSS 变形 技术 。 
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15.4.1 和 矩阵 概述 


矩阵 是 一 个 数学 概念 ， 代 表 一 组 数字 、 符 号 或 表达 式 的 矩形 阵列 。 在 图 形 / 图 像 学 中 ， 矩 
阵 被 用 于 在 2D 屏幕 上 进行 3D 图 像 的 线性 变换 。 实 际 上 , 这 种 变换 处 理 通过 矩阵 函数 来 完成 ， 
matrixO 函 数 允 许 创建 线 性 变换 ，matrix3d( ) 函 数 允 许 使 用 CSS 代码 将 三 维 坐标 投射 到 二 维 坐 
标 中 。 变 形 处 理 就 是 将 坐标 系统 中 一 个 坐标 点 的 位 置 乘 以 一 个 变形 矩阵 。 


15.4.2 ”变形 与 坐标 系统 


在 Web 中 ,每 一 个 页 面 都 是 一 个 坐标 系统 ， 原 点 在 页 面 的 左上 角 (0,0)。 其 中 , 义 轴 方向 
为 从 左 到 右 ，Y 轴 方 向 从 上 到 下 ，Z 轴 则 是 页 面 观 察 者 与 页 面 之 间 的 距离 。Z 坐标 值 越 大 ， 
代表 观察 者 离 页 面 的 距离 越 近 ， 反 之 越 远 。 

当 对 一 个 对 象 做 变形 处 理 时， 首先 建立 本 地 坐标 系统 。 默 认 情况 下 ， 本 地 坐标 系统 中 的 
原点 在 对 象 正 中 央 ， 如 图 15-17 所 示 。 

可 以 通过 在 样式 代码 中 使 用 transfonm-origin 属性 来 调整 坐标 原点 。 在 本 地 坐标 系统 中 对 
任何 坐标 点 进行 的 变形 都 是 参考 坐标 原点 进行 的 。 例 如 ， 使 用 transform-origin:60px 60px: 样 
式 代 码 可 以 把 坐标 原点 右 移 60px、 下 移 60px。 图 5-18 所 示 即 为 在 将 坐标 原点 调整 到 (60,60) 
后 ， 坐 标 系统 中 点 (30.30) 的 位 置 。 








15-17 本 地 坐标 系统 示例 图 15-18 调整 坐标 原点 


当 开 发 者 进行 变形 处 理 时 ， 浏 览 器 自动 执行 计算 。 开 发 者 只 需要 为 变形 处 理 指 定 相关 参 
数 即 可 。 
154.3 2D 矩阵 变形 
下 面 是 一 个 处 理 2D 变形 时 使 用 的 3x3 矩阵 ， 如 图 15-19 所 示 。 
a c e 
bd f 
0 0 1 
图 15-19 2D 变形 时 使 用 的 3x3 ERE 


也 可 以 将 这 个 2D 变形 矩阵 书写 为 matrix(ab.cde 了 ，a-f 均 为 数字 ， 用 来 决定 执行 什么 
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样 的 变形 处 理 。 
当 应 用 2D 变形 处 理 时， 浏览 器 会 自动 将 二 维 变形 矩阵 与 数组 [xyY]1] 相 乘 。 其 中 , x 值 和 
y 值 分 别 为 一 个 坐标 点 在 和 轴 方 向 和 立轴 方向 上 的 位 置 。 

为 了 计算 经 过 变形 处 理 后 坐标 点 的 位 置 , 将 组 [x.y,1] 和 2D 变形 矩阵 相 乘 ， 如 图 15-20 
所 示 。 每 一 种 变形 处 理 都 有 特定 的 2D 变形 矩阵 。 例 如, 平移 用 的 2D 变形 矩阵 如 图 15-21 
所 示 。 















































a c e] [x ax+cy+e 1 QU ti 
b d f|e|y|=|bx+dy+f 0 1 fy 
00 1j|l 070-41 00 1 
图 15-20 ”坐标 点 与 2D 变形 矩阵 相 乘 图 15-21 平移 变形 托 阵 
其 中 ，tx 和 ty 代表 坐标 原点 被 平移 后 新 坐标 点 的 位 置 。 可 以 使 用 数组 [1,0,0,1,tx,ty] 来 代 
替 它 ， 这 个 数组 将 被 用 于 matrix( ) 函 数 中 ， 代 码 如 下 : 
#mydiv {transform:matrix(1,0,0,1,tx,ty);} 


下 面 的 例子 使 用 translate 方法 将 页 面 中 的 一 个 div 元 素 从 坐标 原点 往 右 下 方 平 移 100px。 
"UNIT: 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title> 使 用 translate 方法 处 理 平移 </title> 
<style> 
#test{ 
width: 200px; 
height: 200px; 
transform: translate(100px,100px); 
background-color: blue; 
} 
</style> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html> 
将 div 元 素 的 transform 样式 属性 代码 修改 为 : 
transform: matrix(1,0.0,1,150,150); 
运行 上 述 代码 ， 页 面 显 示 如 图 15-22 所 示 。 在 这 个 示例 中 ， 两 个 150 分 别 代表 坐标 原点 
被 平移 后 新 的 X 轴 坐 标点 位 置 及 立轴 坐标 点 位 置 。 可 以 使 用 数组 [1.0.0.1.150,150] 来 代替 它 ， 
这 个 数组 将 被 用 于 matrix 函数 中 。 
下 面 以 页 面 上 坐标 点 (200.200) 处 的 一 个 像素 为 例 进行 计算 ， 平 移 后 的 坐标 点 的 计算 过 程 
如 图 15-23 所 示 。 
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D 使 用 translate 方 法 处 理 S x 
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图 15-22 页 面 打开 时 的 效果 


1 0 100| |200 200+0+100| |300 
0 1 100|4|200|2|0-200-100|—| 300 
00 1 1 0+0+1 300 


图 15-23 ”平移 后 的 坐标 点 的 计算 过 程 


可 以 看 出 , 与 变形 矩阵 相 乘 后 ， 原 点 坐标 (200,.200) 处 的 像素 位 置 将 变 为 300.300)。 同 样 ， 
div 元 素 中 的 所 有 像素 都 右 移 100px、 下 移 100px。 


1544 3D 矩阵 变形 
下 面 是 一 个 处 理 3D 缩放 变形 时 使 用 的 4x4 矩阵 ， 如 图 15-24 所 示 。 


sx 000 
0 sy 0 0 
0 0 sz 0 
020r 39: f 


图 1524 3D 缩放 变形 时 使 用 的 4x4 矩阵 


Jep, sx, sy 和 sz 代表 X、Y、Z 轴 方 向 上 的 缩放 倍数 。 如 果 使 用 matrix3d( ) 函 数 ， 代 码 为 : 
transform:matrix3d(sx.0.0.0.0.sy.0.0.0.0.52.0.0,0.0,1) . 
在 下 面 的 示例 中 ， 首 先 使 用 scale3d 方法 将 页 面 中 的 一 个 方形 div 元 素 在 X 轴 方 向 上 缩 
小 五 分 之 一 ， 在 立轴 方向 上 缩小 一 半 。 
【 例 15-13] 使 用 scale3d 方法 缩小 元 素 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 使 用 scale 缩小 元 素 </title> 
<style> 
#test{ 
width: 300px; 
height: 300px; 
transform: scale3d(0.8,0.5,1); 
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background-color: lightskyblue; 


<html> 
运行 以 上 程序 , 效果 如 图 15-25 所 示 。 由 于 在 和 轴 和 立轴 方向 上 的 缩放 倍数 不 一 致 ， 因 
此 正方 形变 成 了 长 方形 。 





D 使 用 scale 缩 小 元 素 
S © © 127.00.1:8020/ch15/15-12.html 





图 15-25 3D 缩放 变形 效果 


将 div 元 素 的 transform 样式 属性 代码 修改 为 : 
transform:matrix3d(0.8,0,0,0,0,0.5,0.0,0.0,1.0.0.0.0,1): 
在 页 面 上 查看 ， 显 示 效 果 不 变 。 如 果 将 这 个 三 维 缩放 变形 矩阵 乘 以 坐标 点 (150.150.1)， 
计算 结果 如 图 15-26 所 示 ， 新 的 坐标 点 为 (120.75.1)。 
08 0 0 0| |150 120+0+0+0 120 
0 05 Á 0 0| |150 0+75+0+0 75 
1 . 
0 


o 0 10||1/| | ororro | | 1 
0 0 1 1 0+0+0+1 


图 15-26 将 3D 缩放 变形 矩阵 乘 以 坐标 点 (150,150.1) 


15.4.5 ”使 用 矩阵 实现 多 重 变形 


通过 矩阵 也 可 以 实现 多 重 变形 处 理 。 这 里 选用 2D 变形 来 进行 介绍 。 接 下 来 我 们 将 使 用 
3x3 变形 矩阵 和 matrix( ) 函 数 来 实现 。 通 过 这 个 变形 ， 把 元 素 旋转 43” ， 然 后 放大 1.5 倍 。 

旋转 变形 使 用 的 矩阵 为 [cos(a) sin(a) -sin(a) cos(aj]，a 代表 角度 。 为 了 放大 元 素 ， 这 里 使 
用 和 矩阵 [sx 00sy00]。 为 了 使 用 多 重 变形 ， 首 先 将 这 两 个 矩阵 相 乘 ， 如 图 15-27 所 示 。 





0.7071 -0.7071 0| |15 0 0 1.0606 -1.0606 0 
0.7071 0.7071 0j。 15 0|=|1.0606 1.0606 0 
0 0 1 0 人 0 0 1 

















图 15-27 ”计算 多 重 变形 时 使 用 的 矩阵 
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将 例 15-12 中 div 元 素 的 transform 样式 属性 代码 修改 为 : 
transform:matrix(1.0606, 1.0606, —1.0606, 1.0606. 0, 1): 
运行 程序 后 ， 页 面 显示 效果 如 图 15-28 所 示 。 





D) 使 用 scale 缩 小 元 素 
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图 15-28 对 div 元 素 使 用 多 重 变 形 处 理 后 的 效果 


如 果 对 坐标 点 (298,110) 使 用 经 过 计算 后 的 变形 和 矩阵， 新 的 坐标 点 为 (199.393,432.725), il 
算 过 程 如 图 15-29 所 示 。 


298| |199.393 
1.0006 1.0606 0/|*|110|2| 432.725 


0 0 òl | 1 1 
图 15-29 ”对 (298,110) 坐 标点 使 用 经 过 计算 后 的 变形 矩阵 


155 ”本章 小 结 


本 章 分 两 部 分 介绍 了 CSS3 中 的 变形 属性 : 第 一 部 分 是 2D 变形 ， 第 二 部 分 是 3D 变形 。 
对 于 二 维 空间 中 的 变形 ， 主 要 向 大 家 介绍 了 旋转 rotate( )、 倾 斜 skew()、 位 移 translate()、 缩 
放 scale( ) 和 2D 矩阵 等 函数 功能 。 对 于 三 维 空间 中 的 变形 ， 向 大 家 详细 介绍 了 3D 空间 中 的 
3D 旋转 、3D 位 移 、3D 缩放 和 3D 矩阵 。 通 过 本 章 的 学 习 ， 大 家 对 CSS3 中 的 变形 处 理应 该 
有 了 较 深 的 了 解 。 


区 -1.0606 0 

















15.66 思考 和 练习 


1. 在 CSS3 中 ， 旋 转 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
2. 在 CSS3 中 ， 缩 放 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
3. 在 CSS3 中 ， 移 动 通过 什么 方法 来 实现 ? 请 举例 说 明 。 


. 在 CSS3 中 ， 扭 曲 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
- 请 使 用 两 个 以 上 的 2D 变形 操作 来 制作 一 个 例子 。 




















o 0-0 4 上 


. 请 使 用 两 个 以 上 的 3D 变形 操作 来 制作 一 个 例子 。 
10. 请 使 用 变形 矩阵 来 实现 旋转 、 缩 放 、 平 移 操作 。 





. 在 CSS3 中 ，3D 位 移 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
. 在 CSS3 中 ，3D 旋转 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
. 在 CSS3 中 ，3D 缩放 通过 什么 方法 来 实现 ? 请 举例 说 明 。 
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第 16 章 ”设计 动画 











使 用 CSS3 中 的 动画 功能 可 以 制作 出 在 网 页 上 运行 的 动画 ,CSS3 中 的 动画 功能 主要 包括 
Transitions 和 Animations， 这 两 种 功能 都 可 以 用 来 制作 动画 效果 。 其 中 ，Transitions 功能 支持 
从 一 个 属性 值 平滑 过 渡 到 另 一 个 属性 值 , 方便 用 来 制作 颜色 渐变 和 形状 渐变 动画 ; Animations 
功能 支持 通过 对 关键 帧 的 指定 来 在 页 面 上 产生 更 复杂 的 动画 效果 ， 以 方便 制作 逐 帧 动画 。 

例如 ， 利 用 Transitions 功能 ， 可 以 通过 改变 background-color 属性 值 来 让 背景 色 从 一 种 
颜色 平滑 过 渡 到 另 一 种 颜色 。 


























本 章 学 习 目标 : 
e 掌握 过 渡 动 画 的 制作 方法 ， 掌 握 过 渡 属 性 、 过 渡 时 间 、 过 渡 延 迟 时 间 、 过 渡 效 果 的 
设置 操作 


e 掌握 3D 动画 的 制作 方法 ， 掌 握 动画 名 称 、 动 画 时 间 、 动 画 播放 方式 、 动 画 延 迟 时 间 、 
动画 播放 次 数 以 及 动画 播放 方向 的 设置 操作 

e 掌握 渐变 效果 的 制作 方法 ， 包 括 WebKit 渐变 、Mozilla 渐变 、Opera 渐变 和 正 渐变 

。 能 够 应 用 CSS3 的 动画 功能 制作 具有 一 定 综合 程度 的 动画 效果 


16.1 ”过滤 动画 


CSS Transformation 呈现 的 是 一 种 变形 效果 ， 而 CSS Transition 呈现 的 是 一 种 过 渡 效 果 ， 
就 是 一 种 动画 转换 过 程 ， 如 渐 显 、 渐 弱 、 动 画 快慢 等 。CSS Transformation 和 CSS Transition 
是 两 种 不 同 的 动画 模型 ， 因 此 ，W3C 为 动画 过 渡 定 义 了 单独 的 模块 。 

过 渡 可 以 与 变形 同时 使 用 。 例 如， 触发 :hover 或 :focus 事件 后 创建 动画 过 程 ， 诸 如 淡出 背 
景色 、 滑 动 一 个 元 素 以 及 让 一 个 对 象 旋转 等 都 可 以 通过 CSS 转换 来 实现 。 

W3C 标准 中 对 CSS3 Transition 是 这 样 描述 的 : “CSS Transition 允许 CSS 的 属性 值 在 一 
定 的 时 间 区 间 内 平滑 过 渡 。 这 种 效果 可 以 在 鼠标 单 击 、 获 得 焦点 、 被 单 击 或 对 元 素 的 任何 改 
变 中 触发 ， 并 圆滑 地 以 动画 效果 改变 CSS 的 属性 值 。” 

transition 属性 的 基本 语法 如 下 ， 其 初始 值 根据 各 个 子 属性 的 默认 值 而 定 : 

transition: [-'transition-property"- || <transition-duration> || <transition-timing-function'> || <transition-delay’> [, 

和 

transition 属性 主要 包含 以 下 4 个 子 属性 : 
transition-property: 执行 变换 的 属性 
transition-duration: 变换 延续 的 时 间 
transition-timing-function: 在 延续 时 间 段 ， 变 换 的 速率 变化 
transition-delay: 变换 延迟 时 间 
面 分 别 介绍 这 4 A T 





























e . e o 





16.1.1 
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定义 过 渡 属 性 














transition-property 属性 用 来 定义 转换 动画 的 CSS 属性 名 称 ， 如 background-color 属性 。 
该 属性 的 语法 格式 如 下 : 











transition-property:none | all | [ <IDENT> ] [ '' <IDENT> ]* 


transition-property 用 来 指定 在 元 素 的 哪个 属性 发 生 改 变 时 执行 过 渡 效 果 ， 主 要 有 以 下 几 
Mi: none( 没 有 属性 改变 ); all( 所 有 属性 改变 )， 这 也 是 默认 值 ; indent( 元 素 属 性 名 )。 当 值 为 
none 时 ， 过 渡 马上 停止 执行 。 当 值 为 al 时 ， 元 素 产生 任何 属性 值 变 化 时 都 将 执行 过 渡 效 果 。 
indent 可 以 是 指定 元 素 的 某 个 属性 值 ， 对 应 的 类 型 如 下 : 





color: 通过 红 、 绿 、 蓝 和 透明 度 进行 变换 ， 如 background-color, border-color, color. 
outline-color 等 属性 。 

length: 数值 数据 ， 如 word-spacing, width, vertical-align, top, right, bottom, left, 
padding, outline-width, margin, min-width, min-height, max-width, max-height, 
line-height, height, border-width, border-spacing, background-position 等 属性 。 
percentage: 数值 数据 ， 如 word-spacing, width, vertical-align, top. right, bottom, left, 
min-width, min-height, max-width, max-height, line-height, height. background-position 
等 属性 。 

integer: 整数 ， 如 outline-offset、z-index 等 属性 。 

number: 数值 数据 ， 如 zoom. opacity. font-weight 等 属性 。 

transform list， 变 形 列表 。 

rectangle: 通过 x、y、width 和 height 进行 变换 ， 如 crop. 

visibility: 离散 步 又， 在 0~1 数字 范围 之 内 ，0 表示 “隐藏 ”，1 表示 完全 “显示 ”， 
如 visibility。 

shadow: 作用 于 color, x. y 和 blur 属性 ， 如 text-shadow。 

gradient: 通过 每 次 停止 时 的 位 置 和 颜色 进行 变化 。 它 们 必须 有 相同 的 类 型 (放射 状 的 
或 线性 的 ) 以 及 相同 的 停止 数值 以 便 执行 动画 ， 如 background-image。 

paint server (SVG): 只 支持 从 gradient 到 gradient 以 及 从 color 到 color 的 变化 。 


面 的 规则 进行 变化 ， 否 则 无 变化 。 
a shorthand property: 如 果 缩 写 的 所 有 部 分 都 可 以 实现 动画 ， 则 会 像 所 有 单个 属性 变 
化 一 样 变化 。 





具体 什么 属性 可 以 实现 过 渡 效 果 ， 在 W3C 官网 上 列 出 了 所 有 可 以 实现 过 渡 效 果 的 CSS 
属性 值 以 及 值 的 类 型 ， 大 家 可 以 到 官网 了 解 详情 。 这 里 需要 注意 的 是 ， 并 不 是 所 有 的 属性 改 
变 都 会 触发 过 渡 效果 ， 比 如 页 面 的 自 适 应 宽度 ， 当 浏览 器 改变 宽度 时 ， 并 不 会 触发 过 渡 效果 。 
但 上 面 所 列 的 属性 类 型 发 生 改变 都 会 触发 过 渡 效 果 。 

【 例 16-1】 制作 一 个 简单 的 背景 色 切 换 动画 。 





«style type="text/css"> 
#test { 
background-color: antiquewhite; 
width: 400px; 
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height: 100px; 
j 
#test:hover ( 
background-color: goldenrod; 
-webkit-transition-property: background-color; 
-moz-transition-property: background-color; 
-o-transition-property: background-color; 
} 
</style> 
</head> 
<body> 
<div id="test"></div> 
</body> 


运行 以 上 程序 , 效果 如 图 16-1 所 示 。 矩形 刚 开始 是 淡 黄 色 的 ， 当 把 鼠标 指针 移 到 矩形 上 
时 ， 和 矩形 变 成 深 黄 色 。 
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图 16-1 制作 的 背景 色 切 换 动 画 














16.1.2 ”定义 过 渡 时 间 


transition-duration 用 来 指定 元 素 转换 过 程 的 持续 时 间 ， 即 设置 从 旧 属 性 换 到 新 届 性 所 花 
费 的 时 间 ， 单 位 为 秒 。 该 属性 的 语法 格式 如 下 : 
transition-duration:<time> [, <time>]* 
该 属性 的 初始 值 为 0， 适 用 于 所 有 元 素 以 及 :before 和 :after 伪 元 素 。 默 认 情况 下 ， 动 画 过 
渡 时 间 为 0 秒 ， 所 以 当 指 定 元 素 动画 时 ， 会 看 不 到 过 渡 的 过 程 ， 而 是 直接 看 到 结果 。 
【 例 16-2】 背景 色 从 蓝 色 逐渐 过 渡 到 绿色 。 
HTML 代码 与 例 16-1 相同 ，CSS 代码 如 下 : 


<style type="text/css"> 

#test { 
background-color: blue; 
width: 400px; 
height: 100px; 

} 

#test:hover { 
background-color: green; 


-webkit-transition-property: background-color 
-moz-transition-property: background-color; 
-o-transition-property: backeround-color; 
-webkit-transition-duration: 3s; 
-moz-transition-duration: 3s; 
-o-transition-duration: 3s; 
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} 
</style> 
运行 以 上 程序 ， 效 果 如 图 16-2 所 示 。 
ue - 口 x we - o x 
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图 16-2 背景 色 从 蓝 色 过 渡 到 绿色 











16.1.3 ”定义 过 渡 延 迟 时 间 


transition-delay 属性 用 来 指定 动画 开始 执行 的 时 间 ， 也 就 是 在 改变 元 素 属性 值 后 多 长 时 
间 开 始 执行 过 渡 效 果 。 该 属性 的 语法 格式 如 下 : 
transition-delay:-time- [. <time>]* 
其 中 <tme> 为 数值 ， 单 位 为 s( 秒 ) 或 ms E»). transition-delay 的 用 法 和 transition-duration 
极其 相似 ， 也 可 以 作用 于 所 有 元 素 ， 包 括 :before 和 :after 伪 元 素 。 默认 大 小 是 "0"， 也 就 是 变 
换 立 即 执行 ， 没 有 延迟 。 
有 时 候 ， 不 只 需要 改变 一 个 CSS 属性 的 过 渡 效 果 ， 而 是 想 要 改变 两 个 或 多 个 CSS 属性 
的 过 渡 效 果 ， 此 时 只 要 把 几 个 过 渡 的 声明 串 在 一 起 ， 用 逗号 (“，”) 隔 开 ， 然 后 各 自 便 可 以 拥 
有 不 同 的 延续 时 间 和 速率 变换 方式 。 但 需要 注意 一 点 : transition-delay 与 transition-duration 属 
性 的 值 都 是 时 间 ， 所 以 要 区 分 它们 在 连 写 形式 中 的 位 置 ， 一 般 浏 览 器 会 根据 先后 顺序 决定 ， 
第 一 个 可 以 解析 为 时 间 的 为 transition-duration， 第 二 个 为 transition-delay。 例 如 : 
a{ 
-moz-transition: background 0.5s ease-in,color 0.3s ease-out; 
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out; 
-o-transition: background 0.5s ease-in.color 0.3s ease-out; 
transition: background 0.5s ease-in.color 0.3s ease-out; 
} 
如 果 想 为 元 素 执 行 所 有 过 渡 效 果 ， 那 么 还 可 以 利用 all 属性 值 来 操作 ， 此 时 它们 共享 同 
样 的 延续 时 间 以 及 速率 变换 方式 ， 例 如 : 
a{ 
-moz-transition: all 0.5s ease-in; 
-webkit-transition: all 0.5s ease-in; 
-o-transition: all 0.5s ease-in; 
transition: all 0.5s ease-in; 
} 
综 上 所 述 ， 可 以 给 出 过 渡 的 速记 法 : transition: <property> <duration> <animation type> 
<delay>， 如 图 16-3 所 示 。 
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选择 局 性 动画 类 型 
transition: all .5s este cout 1s; 
LT yn 











图 16-3 过渡 速 记 图 


相应 的 示例 代码 如 下 : 
pi 
-webkit-transition: all .5s ease-in-out 1s; 
-o-transition: all .5s ease-in-out 1s; 
-moz-transition: all .5s ease-in-out 1s; 
transition: all .5s ease-in-out 15; 


) 
【 例 16-3】 设置 过 渡 动 画 推迟 1 秒 执行 ， 当 鼠标 移 过 时 ， 不 会 看 到 任何 变化 ,过 了 1 秒 
之 后 背景 色 才 从 红色 逐渐 过 渡 到 白色 。 
HTML 代码 与 例 16-1 相同 ，CSS 代码 如 下 : 
#test { 
background-color: red; 
width: 400px; 
height: 100px; 
j 
#test:hover ( 
background-color: white; 
-webkit-transition-property: background-color; 
-moz-transition-property: background-color; 
-o-transition-property: background-color; 
-webkit-transition-duration: 15; 
-moz-transition-duration: 1s; 
-o-transition-duration: 1s; 
-webkit-transition-delay: 1s; 
-moz-transition-delay: 1s; 
-o-transition-delay: 1s; 
) 
运行 以 上 程序 ， 效 果 如 图 16-4 所 示 。 拢 形 的 初始 颜色 为 红色 ， 当 鼠标 指向 矩形 时 ，1 秒 
钟 之 后 ， 红 色 逐 渐变 成 白色 ， 有 一 种 逐渐 消失 的 效果 。 
"e - 0 x 9S - o x 
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E164 带 延 迟 的 过 渡 效 果 

















16.1.4 ”定义 过 渡 效果 
transition-timing-function. 的 值 允许 开发 人 员 根 据 时 间 的 推进 来 改变 属性 值 的 变换 速率 ， 
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也 就 是 定义 过 渡 动画 的 效果 ， 其 基本 语法 格式 如 下 : 


transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, 


<number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(-number-, <number>, 
«number-, «number-)]* 
transition-timing-function 有 6 个 可 能 的 值 : 


ease: 过 渡 效 果 逐 渐变 慢 , 为 默认 值 , ease 函数 等 同 于 贝 塞 尔 曲线 (0.25. 0.1, 0.25, 1.0). 




















o linear: 匀速 过 渡 效果 ，linear 函数 等 同 于 贝 塞 尔 曲线 (0.0, 0.0, 1.0, 1.0). 
e ease-in: 加 速 过 渡 效 果 ，ease-in 函数 等 同 于 贝 塞 尔 曲线 (0.42.0.1.0.1.0)。 
e ease-out: 减速 过 渡 效 果 ，ease-out 函数 等 同 于 贝 蹇 尔 曲线 (0, 0, 0.58, 1.0). 
e ease-in-out: 过 渡 效 果 首 先是 加 速 ， 然 后 减速 ，ease-in-out 函数 等 同 于 贝 塞 尔 曲线 (0.42.0, 
0.58,1.0). 
e cubic-bezier: 允许 自 定义 一 条 时 间 曲 线 ， 即 特定 的 cubic-bezier 曲线 。(xl.yl.x2.y2) 
中 的 4 个 值 特定 于 曲线 上 的 点 P1 和 点 P2。 所 有 值 必须 在 [0.1] 区 域内 ， 和 否则 无 效 。 
【 例 16-4】 制作 线性 渐变 效果 的 动画 。 
本 例 的 HTML 代码 结构 与 例 16-3 相同 ，CSS 代码 如 下 : 
#test { 
background-color: red; 
width: 400px: 
height: 100px; 
} 
#test:hover { 


background-color: yellow: 
-webkit-transition-property: background-color; 
-moz-transition-property: background-color; 
-o-transition-property: background-color; 
-webkit-transition-duration: 2s; 
-moz-transition-duration: 2s; 
-o-transition-duration: 2s; 
-webkit-transition-timing-function: linear: 
-moz-transition-timing-function: linear; 
-o-transition-timing-function: linear; 





} 
运行 以 上 程序 ， 效 果 如 图 16-5 所 示 。 当 鼠标 指向 矩形 时 ， 算 形 逐 渐 由 红色 过 渡 到 黄色 。 
"P - U x "s; - o x 
D meme D mense 
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图 16-5 


逐渐 过 渡 的 渐变 效果 
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162 3D 动画 


在 CSS3 中 ， 除 了 可 以 使 用 Transitions 功能 实现 动画 效果 之 外 ， 还 可 以 使 用 Animations 
功能 实现 更 为 复杂 的 动画 效果 。 

animation 属性 是 一 个 复合 属性 ， 包 含 animation-name、animation-duration 、animation- 
timing-function、animation-delay、animation-iteration-count 和 animation-direction 子 属 性 值 。 语 
法 格式 如 下 : 

mia a et | | 

| 

<animation-duration>||<animation-timing-function>||<animation-delay>||<animation-iteration-count>|| 

«animation-direction- ]||-animation-play-state-]*: 

animation 属性 的 初始 值 根据 各 个 子 属 性 的 默认 值 而 定 ， 适 用 于 所 有 块 元 素 和 内 联 元 素 。 
注意 ， 在 使 用 animation 属性 时 ， 需 要 检测 浏览 器 对 CSS 动画 的 支持 性 。 


16.2.1 定义 动画 名 称 


animation-name 用 来 定义 动画 的 名 称 ， 其 基本 语法 格式 如 下 : 
animation-name: none | IDENT[.none | IDENT]*: 

其 中 ,IDENT 是 由 Keyframes 创建 的 动画 名 。 换 句 话说 , 此 处 的 IDENT 必须 和 Keyframes 
中 的 IDENT 一 致 ， 如 果 不 一 致 ,将 不 能 实现 任何 动画 效果 ; none 为 默认 值 ， 当 值 为 none 时 ， 
将 没有 任何 动画 效果 。 另 外 ， 这 个 属性 和 前 面 介绍 的 transition 属性 一 样 ， 可 以 同时 赋 几 个 
animation 给 一 个 元 素 ， 只 需要 用 去 号 “，” 隔 开 即 可 。 
16.2.2 ”定义 动画 时 间 

animation-duration 用 来 指定 播放 动画 持续 的 时 间 长 短 ， 其 基本 语法 格式 如 下 : 

animation-duration: <time>[,<time>]* 

其 中 ，<time> 为 数值 ， 单 位 为 sE), 默认 值 为 0。 这 个 属性 和 transition 属性 的 transition- 

duration 子 属性 的 使 用 方法 一 样 。 


16.2.3 ”定义 动画 播放 方式 


animation-timing-function 指定 元 素 根据 时 间 的 推进 来 改变 属性 值 的 变换 速率 ， 说 得 简单 
点 就 是 动画 的 播放 方式 ， 其 基本 语法 格式 如 下 : 
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, 
<number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, «number, 
«number», «number-)]* 


和 transition 属性 的 transition-timing-function 子 属性 一 样 ，animation-timing-function 具有 
以 下 6 种 变换 方式 : ease、ease-in、ease-out、ease-in-out、linear 和 cubic-bezier， 使 用 方法 与 
transition 属性 相同 。 

16.24 ”定义 动画 延迟 时 间 


animation-delay 用 来 指定 动画 延迟 播放 时 间 ， 其 基本 语法 格式 如 下 : 
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animation-delay: <time>[,<time>]* 
其 中 ，<time> 为 数值 ， 单 位 为 s( 秒 )， 默 认 值 也 是 0。 这 个 属性 和 transition-delay 属性 的 
使 用 方法 一 样 。 
16.25 ”定义 动画 播放 次 数 
animation-iteration-count 用 来 指定 播放 动画 的 循环 次 数 ， 其 基本 语法 格式 如 下 : 


animation-iteration-count:infinite | <number> [, infinite | <number>]* 
其 中 ，<number> 为 数字 ， 默 认 值 为 1; infinite 为 无 限 次 数 循 环 。 


16.2.6 ”定义 动画 播放 方向 


animation-direction 用 来 指定 动画 播放 的 方向 ， 其 基本 语法 格式 如 下 : 
animation-direction: normal | alternate [, normal | alternate]* 
有 两 个 值 ， 默 认 值 为 nonmal。 如 果 设 置 为 normal, 动画 的 每 次 循环 都 是 向 前 播放 ， 男 一 
个 值 是 altemate， 其 作用 是 ， 动 画 播放 在 第 偶数 次 向 前 播放 ， 在 第 奇数 次 向 反方 向 播放 。 


16.2.7 ”控制 播放 状态 


animation-play-state 用 来 控制 动画 的 播放 状态 ， 其 基本 语法 格式 如 下 : 
animation-play-state:running | paused [, running | paused]* 
主要 有 running 和 paused HAMÉ. running 为 默认 值 。 它 们 的 作用 类 似 于 音乐 播放 器 ， 可 
以 通过 paused 将 正在 播放 的 动画 停 下 来 ， 也 可 以 通过 running 让 暂停 的 动画 重新 播放 。 这 里 
的 重新 播放 不 一 定 是 从 动画 的 开头 播放 ， 而 是 从 暂停 的 那个 位 置 开 始 播放 。 另 外 ， 如 果 和 暂停 
动画 的 播放 ， 元 素 的 样式 将 回 到 最 原始 设置 状态 。 目 前 只 有 很 少 的 内 核 支 持 这 个 属性 ， 所 以 
只 是 稍微 提 一 下 。 


16.2.8 ”翻转 的 图 片 


本 节 将 借助 animation 属性 来 设计 自动 翻转 的 图 片 效 果 ， 该 效果 模拟 在 2D 平面 中 实现 
3D 翻转 。 在 这 个 动画 中 ， 图 片 在 X 轴 逐 渐 压 缩 ， 然 后 水 平 翻转 图 片 ， 在 2D 平面 中 做 出 3D 
翻转 效果 。 

【 例 16-5】 翻转 的 图 片 。 

<head> 

<meta charset="UTF-8"> 

<title> 图 片 翻转 </title> 

<style type="text/css"> 

#test { 

margin: 0 auto; 
width: 540px; 
height: 405px; 
background: url(img/timg gif) center no-repeat: 
F* XEXL3D Ai] */ 
-webkit-transform-style: preserve-3d; 
庆 设计 沿 y 轴 旋转 、20 秘 线性 过 渡 动画 、 无 限 次 播放 */ 


-webkit-animation-name: y-spin; 
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-webkit-animation-duration: 20s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
} 
/* 调用 动画 */ 
@-webkit-keyframes y-spin { 
0%{ 
-webkit-transform: rotateY (0deg): 
} 
50% { 
-webkit-transform: rotateY (180deg); 
} 
10096 ( 
-webkit-transform: rotateY (360deg); 
} 
H 
</style> 
</head> 
<body> 
<div id="test"></div> 
</body> 
运行 以 上 程序 ， 效 果 如 图 16-6 所 示 。 从 效果 图 中 的 云 休 可 以 看 出 图 片 逐 步 水 平 翻转 的 


图 16-6 翻转 的 图 片 


16.3 ”渐变 效果 


CSS3 渐变 分 为 linear-gradient( 线 性 渐变 ) 和 radial-gradient( 径 向 渐变 ) 两 种 。 本 节 主 要 针对 
线性 渐变 来 剖析 其 具体 用 法 。 为 了 更 好 地 应 用 CSS3 渐变 ， 需 要 先 了 解 一 下 目前 几 种 现代 浏 
览 器 的 内 核 , 主流 内 核 主要 有 WebKit( 熟 悉 的 有 Safari. Chrome 等 浏览 器 )、Mozilla(Gecko)( 熟 
悉 的 有 Firefox, Flock 等 浏览 器 )、Opera(Presto)(Opera 浏览 器 )、Trident(E 浏览 器 )。 本 书 忽 
略 正 不管 ， 主 要 介绍 在 WebKit. Mozilla, Opera 下 的 应 用 ， 当 然 在 正 下 也 可 以 实现 ， 但 需 
要 通过 下 特有 的 滤 镜 来 实现 ， 感 兴趣 的 可 以 搜索 相关 技术 文档 。 


16.3.1. 线性 渐变 在 WebKit 下 的 应 用 
WebKit 是 第 一 个 支持 渐变 的 浏览 器 引擎 ， 其 支持 渐变 的 方法 如 下 : 











7webkit-linear-gradient( [-point || angle. |? stop», <stop> [, <stop>]* ) 
7webkit-gradient(-type-, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 
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-Js 


// 新 的 写法 
// 传 统 写 法 


webkit-gradient 是 WebKit 引擎 对 渐变 的 实现 参数 ， 一 共有 5 个 。 第 一 个 参数 表示 渐变 类 
型 (type)， 可 以 是 linear( 线 性 渐变 ) 或 radial( 径 向 渐变 )。 第 二 个 和 第 三 个 参数 是 一 对 值 ， 分 别 


表示 渐变 的 起 点 和 终点 。 这 对 值 可 以 上 














坐标 形式 表示 , 也 可 以 用 关键 字 表示 , 比如 left top( 左 


EHF left bottom( 左 下 角 )。 第 四 个 和 第 五 个 参数 分 别 是 两 个 color-stop 函数 。color-stop 函数 
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下 面 是 一 个 传统 写法 的 二 


spl: 


图 16-7 WebKit 渐变 


background: -webkit-gradient(linear.center top.center bottom.from(&ccc), 


to(#000)); 
也 可 以 写成 如 下 形式 : 


-webkit-linear-gradient(top,#ccc,#000): 


效果 如 图 16-8 所 示 。 


16.3.2 ”线性 渐变 在 Mozilla 下 的 应 用 


Firefox 浏览 器 从 3.6 版 本 开始 支持 渐变 设计 。Gecko 引擎 定义 了 两 个 私有 函数 ， 分 别 用 


来 设计 线性 渐变 和 径 向 渐变 。 基 本 语法 格式 如 下 : 


-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 
<point> 定 义 渐变 的 起 点 ， 取 值 包含 数值 、 百 分 比 ， 也 可 以 使 用 关键 字 。 
和 right KEFEN X AMEER, top, center 和 bottom 关键 字 定义 Y fl 


图 16-8 渐变 效果 




















Herh, left, center 
坐标 。 用 法 和 








background-position 和 -moz-transform-origin 属性 中 的 定位 方式 相同 。 
<angle> 参 数 定义 直线 渐变 的 角度 ， 单 位 包括 deg( 度 ， 一 圈 等 于 360 度 )、grad( 梯 度 ，90 
度 等 于 100grad)、rad( 弧 度 ， 一 圈 等 于 2*PI rad)。 
<stop> 参 数 定义 步 长 ， 第 一 个 和 第 二 个 <stop> 分 别 是 起 点 颜色 和 终点 颜色 。 还 可 以 在 它 
们 之 间 插 入 更 多 的 参数 ， 以 表示 多 种 颜色 的 渐变 。 
例如 ， 有 以 下 HTML 标记 : 
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«div class-"example examplel"></div> 
有 如 下 CSS FEX: 
.example { 
width: 150px; 
height: 80px; 
} 
.examplel { 
background: -moz-linear-gradient( top,#ccc #000); 
} 
执行 后 的 效果 和 图 16-8 相同 。 


16.3.3 ”线性 渐变 在 Opera 下 的 应 用 


线性 渐变 在 Opera 下 的 使 用 语法 如 下 : 
-O-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */ 
其 中 各 项 参数 与 Mozilla 下 的 渐变 参数 相同 。 例 如 ， 要 在 Opera 浏览 器 下 实现 如 图 16-8 
所 示 的 渐变 效果 ， 代 码 如 下 : 
background: -o-linear-gradient(top.fccc, #000); 
16.3.4 ”线性 渐变 在 IE 下 的 应 用 


IE 依靠 滤 镜 实现 渐变 ， 语 法 格式 如 下 : 
filter: progid:DXImageTransform Microsoft.gradient(GradientType=0,startColorstr=#1471da, endColorstr- 
#1C85FB); /*IE<9>*/ 
DA Nn Oe ea 
#1C85FB)";/*IE8+*/ 
其 中 ， 参 数 startColorstr 表示 起 点 颜色 ，endColorstr 表示 终点 颜色 。GradientType 表示 渐 
变 类 型 ，0 为 默认 值 ， 表 示 垂 直 渐 变 ，1 表示 水 平 渐变 。 


164 ”案例 综合 实战 


本 节 将 综合 运用 前 面 介绍 的 Transition 和 Animation 动画 功能 , 制作 两 个 综合 程度 比较 高 
的 示例 ， 向 读者 展示 如 何 综合 运用 本 章 介 绍 的 动画 功能 ， 提 升 动 画 制作 能 力 。 


16.4.1 设计 级 联 菜单 


很 多 时 候 ， 在 Web 页 的 导航 菜单 中 ， 也 需要 像 Windows 中 的 级 联 菜单 一 样 ， 对 显示 的 
菜单 项 进行 分 类 。 

Web 中 级 联 菜 单 的 设计 方法 有 多 种 , 一 般 使 用 JavaScript 脚本 来 实现 , 也 可 以 使 用 CSS2 
设计 级 联 菜单 ， 但 兼容 性 比较 差 ， 在 实际 项 目 中 使 用 较 少 。 

本 节 将 使 用 CSS3 设计 一 个 级 联 菜单 ,主要 用 到 text-shadow  radius-border 和 box--shadow 
等 属性 。 设 计 一 个 实用 的 级 联 菜单 ， 不 用 添加 任何 JavaScript 脚本 。 

本 例 综合 运用 CSS3 渐变 、 文 字 阴 影 、 圆 角 和 盒子 阴影 等 新 技术 ， 能 够 兼容 主流 的 IE. 
Chrome, Firefox 和 Safari 浏览 器 。 
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【 例 16-6】 级 联 菜单 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 级 联 菜 单 </title> 
<style type="text/css"> 
body { 
background: #ebebeb; 
width: 900px; 
margin: 20px auto; 
color: #666; 
} 
at 
color: #333; 
) 
?nav ( 
margin: 0; 
padding: 7px 6px 0; 
line-height: 100%; 
border-radius: 2em; 
-webkit-border-radius: 2em; 
-moz-border-radius: 2em; 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
background: 48b8b8b; 
/* for non-css3 browsers */ 
filter:progid:DXImageTransform.Microsoft gradient(startColorstr75/a929a9', 
endColorstr ='#7a7a7a'); 
/* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); 
/* for webkit browsers */ 
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); 
/* for firefox 3.6+ */ 
border: solid 1px 46d6d6d; 
3 
#nav li { 
margin: 0 5px; 
padding: 0 0 8px; 
float: left; 
position: relative; 
list-style: none; 
} 
/* main level link */ 
#nava { 
font-weight: bold; 
color: #e7e5e5; 
text-decoration: none; 
display: block; 
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padding: 8px 20px; 
margin: 0; 
-webkit-border-radius: 1.6em; 
-moz-border-radius: 1.6em: 
text-shadow: 0 1px 1px rgba(0, 0, 0, .3): 
} 
/* main level link hover */ 
#nav .current a, 
#nav li:hover>a ( 
background: #dld1d1; 
/* for non-css3 browsers */ 
filter:progid:DXImageTransform Microsoft gradient(startColorstr-Zebebeb', 
endColorstr ^£alalal'; 
/* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(&ebebeb), to(falalal)); 
/* for webkit browsers */ 
background: -moz-linear-gradient(top, #ebebeb, #alala1); 
/* for firefox 3.6+ */ 
color: #444; 
border-top: solid 1px #f8f8f8; 
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2): 
box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
text-shadow: 0 1px 0 rgba(255, 255, 255, .8); 
j 
/* sub levels link hover */ 
nav ul li:hover a, 
#nav li:hover li a ( 
background: none; 
border: none; 
color: #666; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
} 
#nav ul a:hover { 
background: #0399d4 important; 
/* for non-css3 browsers */ 
filter:progid:DXImageTransform Microsoft gradient(startColorstr7*04acec', 
endColorstr- '&0186ba!): 
/* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), 
to(40186ba))'important; 
/* for webkit browsers */ 
background: -moz-linear-gradient(top, #04acec, #0186ba) important; 
/* for firefox 3.6+ */ 
color: #fff important; 
-webkit-border-radius: 0; 
-moz-border-radius: 0: 
text-shadow: 0 1px 1px rgba(0, 0, 0, .1); 
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/* level 2 list */ 

#navul ( 
background: #ddd; 

/* for non-css3 browsers */ 

filter:progid:DXTmage Transform Microsoft gradient(startColorstr—zffHfif, 
endColorstr- &cfcfcf): 

/* forIE */ 

background: -webkit-gradient(linear, left top, left bottom, from(Zfff), to(cfcfcf)); 

/* for webkit browsers */ 

background: -moz-linear-gradient(top, fff, &cfcfcf): 

/* for firefox 3.6+ */ 

display: none; 

margin: 0; 

padding: 0; 

width: 185px; 

position: absolute; 

top: 35px; 

left: 0; 

border: solid 1px £b4b4b4: 

-webkit-border-radius: 10px; 

-moz-border-radius: 10px; 

border-radius: 10px; 

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); 

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); 

box-shadow: 0 1px 3px rgba(0, 0, 0, .3); 

} 

/* dropdown */ 

#nav li:hover>ul { 
display: block: 

j 

#nav ul li { 
float: none; 
margin: 0; 
padding: 0; 

} 

#nav ula ( 
font-weight: normal; 
text-shadow: 0 1px 1px rgba(255, 255, 255, .9); 

} 

/* level 3+ list */ 

#nav ul ul ( 
left: 181px: 
top: -3px: 

5 

/* rounded comers for first and last child */ 

#nav ul li:first-child»a { 
-webkit-border-top-left-radius: 9px; 
-moz-border-radius-topleft: 9px: 
-webkit-border-top-right-radius: 9px; 
-moz-border-radius-topright: 9px; 


*296* 


HIML5+CSS3 网 页 设计 基础 教程 








} 

#nav ul li:last-child>a ( 
-webkit-border-bottom-left-radius: 9px; 
-moz-border-radius-bottomleft: 9px: 
-webkit-border-bottom-right-radius: 9px; 
-moz-border-radius-bottomright: 9px; 

) 

/* clearfix */ 

#nav:after ( 
content: ".": 
display: block: 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0; 

} 

#nav { 
display: inline-block; 

} 

html[xmins] #nav { 
display: block: 

} 

* html #nav { 
height: 1%; 

} 

</style> 
</head> 
<body> 
<ul id="nav"> 


<li class="current"><a href="#"> Ui —/a»—/li 
<li><a href="#"> Hri] >></a> 
<ul> 
<li><a href="#"> Hur l </a></li> 
<li><a href="#"> NEHE >></a> 
«ul- 
<li><a href=' 内 要 闻 </a></li> 
<li><a hre 全 "> 互联 网 科技 >></a> 
«ul 
<li><a href="#"> EK Ja—/li- 
<li><a href="#"> A 1 hé<a></li> 


<i> 
<li><a hre£-"£ iA </a></li> 
<li><a href="#">} <a></i> 


<b 


</body> 


第 16 章 ”设计 动画 。297。 


</html> 
运行 以 上 程序 ， 效 果 如 图 16-9 所 示 。 
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127.0.0.1:8020/ch16/16-G.htmle 





图 16-9 级 联 菜单 效果 
16.42 ”设计 实用 按钮 


在 CSS3 出 现 之 前 , 要 在 网 页 上 使 用 效果 比较 丰富 的 按钮 , 需要 由 设计 师 通 过 Photoshop 
设计 出 来 , 然后 裁 切 成 图 片 , 在 网 页 中 通过 img 元 素 插 入 图 片 按钮 , 或 是 作为 背景 图 片 。 CSS3 
出 现 之 后 ， 前 端 人 员 可 以 完全 摆脱 Photoshop 设计 ， 直 接 设计 出 效果 丰富 的 按钮 。 

本 节 将 通过 CSS3 来 设计 按钮 ， 这 种 设计 方法 有 如 下 优势 : 

e 不 需要 图 片 或 JavaScript 脚本 。 

e 能 够 兼容 主流 浏览 器 版 本 。 

【 例 16-7】 制作 效果 丰富 的 按钮 。 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 实 用 按钮 </title> 


display: inline-block; 

zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
display: inline; 

vertical-align: baseline; 

margin: 0 2px; 

outline: none; 

cursor: pointer; 

text-align: center; 

text-decoration: none; 

font: 14px/100% Arial, Helvetica, sans-serif, 
padding: .5em 2em .55em; 

text-shadow: 0 1px 1px rgba(0, 0, 0, .3); 
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-webkit-border-radius: .5em: 
-moz-border-radius: .5em; 
border-radius: .Sem 
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 
j 
-button:hover { text-decoration: none; } 
-button:active { 
position: relative; 
top: 1px; 
} 
-bigrounded { 
-webkit-border-radius: 2em; 
-moz-border-radius: 2em; 
border-radius: 2em; 
) 
medium ( 
font-size: 12px; 
padding: .4em 1.5em .42em; 
} 
.small { 
font-size: 11px; 
padding: .2em lem .275em; 
} 
/* color styles: gray */ 
-gray { 
color: lightgray; 
border: solid 1px 4333; 
background: #333; 
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(4000)); 
background: -moz-linear-gradient(top, #666, #000); 
filer: progid:DXImageTransform.Microsoft gradient(startColorstr-'4666666', endColorstr— 4000000"); 
} 
.gray:hover { 
background: #0000FF; 
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); 
background: -moz-linear-gradient(top, #444, #000); 
filter: progid:DXImageTransform.Microsoft gradient(startColorstr-4444444', endColorstr— 4000000"); 
3 
.gray:active ( 
color: white; 
background: -webkit-gradient(linear, left top. left bottom, from(#000), to(#444)); 
background: -moz-linear-gradient(top. #000, #444); 
filter: progid:DXImageTransform.Microsoft gradient(startColorstr-^000000', endColorstr=#666666"); 
H 
</style> 


</head> 
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<body> 
<div> 
<a href="#" class="button gray"> 圆 角 按钮 </a> 
<a href-"?" class="button gray bigrounded"> 大 号 按钮 </a> 
<a href="#" class="button gray medium"> 中 号 按钮 </a> 
<a href="#" class="button gray small"> 小 号 按钮 </a> <br /> 
</div> 
</body> 
<html> 


运行 以 上 程序 ， 效 果 如 图 16-10 所 示 。 





D 实用 按钮 x 


€ C © 127.00.1:8020/ch16/16-7.html* 











图 16-10 ”按钮 效果 


1655 ”本章 小 结 


本 章 主要 介绍 了 CSS3 中 的 动画 功能 。CSS3 中 的 动画 功能 主要 包括 Transitions 和 
Animations， 这 两 种 功能 都 可 以 用 来 制作 动画 效果 。 其 中 ，Transitions 功能 支持 从 一 个 属性 值 
平滑 过 渡 到 另 一 个 属性 值 ， 方 使 用 来 制作 颜色 渐变 和 形状 渐变 动画 。 例 如 ， 利 用 Transitions 
功能 ， 通 过 改变 background-color 属性 的 来 让 背景 色 从 一 种 颜色 平滑 过 渡 到 另 一 种 颜色 。 
Animations 功能 则 支持 通过 对 关键 帧 的 指定 来 在 页 面 上 产生 更 复杂 的 动画 效果 ， 方 便 制作 逐 
帧 动画 。 通 过 本 章 的 学 习 ， 读 者 应 能 掌握 过 渡 动画 的 制作 方法 ， 掌 握 过 滤 属性 、 过 渡 时 间 、 
过 渡 延 迟 时 间 、 过 渡 效 果 的 设置 操作 ; 掌握 3D 动画 的 制作 方法 ， 掌 握 动 画 名 称 、 动 画 时 间 、 
动画 播放 方式 、 动 画 延 迟 时 间 、 动 画 播放 次 数 以 及 动画 播放 方向 的 设置 操作 ;掌握 渐变 效果 
的 制作 方法 ， 包 括 WebKit 渐变 、Mozilla 渐变 、Opera 渐变 和 IE 渐变 ， 能 够 应 用 CSS3 的 动 
画 功能 制作 具有 一 定 综合 程度 的 动画 效果 。 


16.6 思考 和 练习 


1. fE CSS3 中 ， 过 渡 动画 通过 哪个 属性 来 实现 ? 请 通过 定义 过 渡 属 性 、 过 渡 时 间 、 过 渡 
延迟 时 间 、 过 渡 效 果 来 实现 一 个 过 渡 动 画 。 

2. 在 CSS3 中 , 3D 动画 通过 哪个 属性 来 实现 ? 在 制作 3D 动画 时 ， 有 哪些 常用 属性 需要 
设置 ， 请 以 示例 进行 说 明 。 

3. 请 将 例 16-5 中 的 程序 敲 一 遍 ， 在 Chrome 浏览 器 中 运行 并 观看 效果 。 

4. 请 将 例 16-6 中 的 程序 敲 一 遍 ， 在 Chrome 浏览 器 中 运行 并 观看 效果 。 

5. 请 将 例 16-7 中 的 程序 敲 一 遍 ， 在 Chrome 浏览 器 中 运行 并 观看 效果 。 
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Web 页 面 布局 是 指 对 页 面 中 的 标题 、 导 航 栏 、 主 要 内 容 、 脚 注 、 表 单 等 各 种 构成 元 素 进 行 
合理 排版 。 过 去 的 CSS 版 本 主要 使 用 float EÈ position 属性 来 对 页 面 中 的 元 素 进行 布局 , 这 些 布 
局 方法 存在 一 些 缺 陷 。 辟 如， 如 果 两 栏 或 多 栏 中 元 素 的 内 容 高 度 不 同 ， 底 部 将 难以 对 齐 。CSS3 
追加 了 一 些 新 的 布局 方式 ， 克 服 了 这 些 缺 陷 ， 还 可 以 快捷 地 对 页 面 中 的 元 素 做 更 复杂 的 布局 。 

本 章 对 CSS3 常用 布局 方式 进行 介绍 ， 主 要 包括 多 栏 布 局 和 盒 布 局 。 这 两 种 布局 方式 受 
到 Firefox, Safari 以 及 Chrome 浏览 器 的 支持 。 

本 章 学 习 目 标 : 

e 掌握 CSS3 多 栏 布局 功能 的 使 用 方法 ， 了 解 多 栏 布局 的 使 用 场合 

e 掌握 CSS3 盒 布 局 功能 的 使 用 方法 ， 了 解 盒 布局 的 使 用 场合 ， 以 及 盒 布 局 和 多 栏 布 局 

的 区 别 
e 掌握 CSS3 中 弹性 盒 布 局 的 基本 概念 以 及 使 用 方法 
e 了 解 弹性 盒 布局 的 布局 原理 


17.1 多 栏 布局 


在 CSS3 多 列 布局 功能 出 现 之 前 ， 如 果 想 让 文本 呈 多 列 显 示 ， 要 么 使 用 绝对 定位 ， 手 动 
给 文本 分 段落 ， 要 么 使 用 JavaScript 脚本 进行 控制 等 。 

CSS3 中 新 增 的 多 栏 布局 功能 是 对 传统 网 页 中 块 状 布局 模式 的 有 力 扩充 。 多 栏 布局 功能 
可 以 方便 开发 人 员 将 文本 排版 成 多 列 ， 实 现 报纸 那样 的 多 栏 效果 ， 如 图 17-1 所 示 。 














据 Business Insider 报 | Fortwo 用 作 城市 内 汽车 
导 ， 戴 姆 勒 股份 公司 计划 : 共享 车 型 。 据 Business | EQ Fortwo 用 作 城 市 内 汽 


在 下 个 月 的 法 兰 克 福 汽车 Insider 报 导 ， 戴 姆 勒 股份 ”| 车 共享 车 型 。 人 们 可 以 


ATAB Smart Vision 


展 上 推出 无 人 驾驶 电动 | 公司 计划 在 下 个 月 的 法 兰 。 | 通过 智能 手机 召唤 无 人 驾 
Smart 概 念 车 。 该 公司 设 | ” 克 福 汽车 展 上 推出 无 人 驾 | ” 驶 汽车 并 将 人 们 送 往 目的 
想 将 Smart Vision EQ i 驶 电动 Smart 概 念 车 。 该 “| os 





图 17-1 多 列 排版 效果 


我 们 知道 ， 当 一 行文 字 太 长 时 ， 读 者 读 起 来 就 比较 费劲 ， 容 易 读 错 行 或 读 串 行 ， 当 视点 
从 文档 的 一 侧 移 到 另 一 侧 ， 然 后 视线 转换 到 下 一 行 的 行 首 时 ， 如 果 眼 球 移动 距离 过 大 ， 注 意 
力 就 会 减退 。 因 此 ， 对 于 大 屏幕 显示 器 ， 在 进行 页 面 设计 时 ， 需 要 限制 文本 行 的 宽度 ， 将 文 
本 多 列 呈 现 ， 就 像 报纸 上 的 新 闻 排版 一 样 。 

CSS3 的 column 属性 包括 6 个 子 属性 : column-width, column-count, column-gap, 
column-rule, column-span 和 column-fill. 


17.1.1 设置 列 宽 和 列 数 
column-width 子 属性 用 于 给 列 定义 最 小 宽度 。 默认 值 为 auto, 表示 将 根据 column-count 子 属 
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性 指定 的 数目 计算 列 宽 。column-count 子 属性 用 于 指定 文本 显示 的 列 数 。 
在 实际 应 用 中 , 通常 将 这 两 个 参数 放 在 columns 中 一 起 指定 。 例 如 ，columns:auto 4: 实 现 
的 是 图 17-1 所 示 的 4 栏 效 果 ， 这 行 代码 将 div 元 素 中 的 内 容 分 成 4 列 显示 ， 根 据 div 元 素 的 
宽度 640px， 均 分 列 宽 为 160px( 包 括 列 间距 )。 
【 例 17-1】 多 栏 布局 的 制作 。 
HTML 页 面 代码 如 下 : 
<b>width: 5096; columns: auto 4; (固定 4 列 )</b> 
«div class="wrapperl"> 
<p>2017 年 9 月 10 日 ， 中 国 无 锡 ， 太 湖 之 滨 。2017 第 二 届 世 界 物 联网 博览 大 会 再 次 成 为 全 球 物 
联网 行业 瞩目 之 地 。</p> 
<p> 本 届 物 博 会 为 期 4 天 (9 月 10 日 至 13 日 )， 将 围绕 “ 物 联 世界 、 共 创 未 来 ”的 主题 举行 1 场 主 
会 议 、10 场 高 峰 论坛 、1 场 物 联网 应 用 和 产品 展览 展示 等 8 场 系列 活动 ， 对 于 推动 物 联网 发 展 、 促 进 产 
业 转 型 升级 具有 重要 意义 。</p> 
<p> 据 了 解 ， 物 联网 应 用 和 产品 展览 展示 会 作为 2017 世界 物 联网 博览 会 的 重要 组 成 部 分 ， 共 有 来 
自 中 、 美 、 英 、 法 、 德 、 日 、 意 等 21 个 国家 和 地 区 的 参展 企业 522 家 ， 特 装 独立 展位 达到 158 家 。</p> 
<p> 江 苏 省 委 书记 李强 在 今天 上 午 举行 的 物 联网 无 锡 峰会 上 对 物 联 网 发 展 发 表 讲 话 ， 表 示 要 让 物 联 
网 发 展 的 朝阳 喷 薄 而 出 。 会 议 由 江苏 省 长 吴 政 隆 主持 。 阿 里 巴巴 、 华 为 等 企业 家 代表 也 进行 了 讲话 。</p> 
</div> 
CSS 样式 代码 如 下 : 
pl 





-moz-columns: auto 4; 
-webkit-columns: auto 4; 
columns: auto 4; 
} 
运行 程序 ， 效 果 如 图 17-2 所 示 。 


width: 50%; columns: auto 4; (国定 4 列 ) 

2017 年 9 月 10 日 ， 中国。 会 议 、10 场 高 峰 论坛 、 ”的 重要 组 成 部 分 ,共有 ”发 表 讲 话 ， 表 示 要 让 物 
无 锡 ， 太 湖 之 滨 。2017 ”1 场 物 联网 应 用 和 产品 。 来 自 中 、 美 、 英 、 法 、 。 联网 发 展 的 朝阳 喷 薄 而 
第 二 届 世 界 物 联网 博览 展览 展示 等 8 场 系列 活 。 德 、 日 、 意 等 21 个 国家 出。 会 议 由 江苏 省 长 刁 
大 会 再 次 成 为 全 球 物 联 ” 动 ， 对 于 推动 物 联网 发 ” 和 地 区 的 参展 企业 522 — 政 隆 主持 。 阿 里 巴巴 、 
网 行业 瞩目 之 地 。 展 、 促 进 产业 转型 升级 ”家 ， 特 装 独立 展位 达到 ”华为 等 企业 家 代表 也 进 
本 届 物 博 会 为 期 4 天 (9 — 具有 重要 意义 。 158 家 。 行 了 讲话 。 

月 10 日 至 13 日 ) , 将 围 。” 据 了 解 ， 物 联网 应 用 和 江苏 省 委 书 记 李 强 在 今 

绕 “ 物 联 世 界 、 共 创 未 产品 展览 展示 会 作为 天 上 午 举行 的 物 联网 无 

来 ”的 主题 举行 1 场 主 。 2017 世 界 物 联网 博览 会 锡 峰会 上 对 物 联网 发 展 


图 17-2 多 栏 布局 效果 
在 这 个 页 面 中 ， 外 层 div 元 素 的 宽度 为 640px， 通 过 计算 后 得 到 的 列 宽 也 是 固定 的 ， 无 
论 如 何 缩放 浏览 器 窗口 的 大 小 ， 都 是 固定 4 列 。 
这 样 固定 列 宽 显然 不 够 灵活 。 如 果 想 要 根据 窗口 尺寸 自 适应 ， 当 改变 窗口 宽度 时 ， 列 数 
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递减 ， 随 着 窗口 拉 宽 ， 栏 数 也 从 1 栏 递 增 到 4 栏 。 如 何 操作 呢 ? 可 以 尝试 将 外 层 div 从 固定 


宽度 (width: 640px:) 改 成 动态 宽度 (width: 50%;), columns-width 不 能 同时 为 auto; 
div 元 素 的 动态 宽度 得 到 列 宽 ， 仍 然 固定 为 4 列 。 所 以 ，columns-width 需要 为 固 





否则 会 根据 





【 例 17-2】 根据 窗口 宽度 大 小 来 确定 文本 显示 的 栏 数 。 

HTML 页 面 代码 如 下 : 
<b>width: 50%; columns: 100px 4; (根据 窗口 大 小 动态 改变 列 数 )</b> 
«div class="wrapper2"> 


定 值 。 


<p>2017 年 9 月 10 日 ， 中 国 无 锡 ， 太 湖 之 滨 。2017 第 二 届 世 界 物 联 网 博览 大 会 再 次 成 为 全 球 物 


联网 行业 瞩目 之 地 。</p> 


<p> 本 届 物 博 会 为 期 4 天 (9 月 10 日 至 13 日 )， 将 围绕 “ 物 联 世界 、 共 创 未 来 ”的 主题 举行 1 场 主 
会 议 、10 场 高 峰 论坛 、1 场 物 联网 应 用 和 产品 展览 展示 等 8 场 系列 活动 ， 对 于 推动 物 联 网 发 展 、 促 进 产 


业 转 型 升级 具有 重要 意义 。</p> 





<p> 据 了 解 ， 物 联网 应 用 和 产品 展览 展示 会 作为 2017 世界 物 联网 博览 会 的 重要 组 成 部 分 ， 共 有 来 
自 中 、 美 、 英 、 法 、 德 、 日 、 意 等 21 个 国家 和 地 区 的 参展 企业 522 家 ， 特 装 独立 展位 达到 158 家 。</p> 


<p> 江 苏 省 委 书记 李强 在 今天 上 午 举行 的 物 联网 无 锡 峰 会 上 对 物 联 网 发 展 发 表 讲 话 ， 


表示 要 让 物 联 


网 发 展 的 朝阳 喷 薄 而 出 。 会 议 由 江苏 省 长 吴 政 隆 主 持 。 阿 里 巴巴 、 华 为 等 企业 家 代表 也 进行 了 讲话 。</p> 


</div> 
CSS 样式 代码 如 下 : 


-wrapperl { 
-moz-columns: auto 4: 
-webkit-columns: auto 4; 
columns: auto 4; 

} 

-wrapper2 ( 
-moz-columns: 150px 4; 
-webkit-columns: 150px 4; 
columns: 150px 4; 


} 
运行 程序 ， 效 果 如 图 17-3 所 示 。 可 以 看 到 ， 初 始 显示 效果 为 4 列 。 


width: 50%; columns: 100px 4; (根据 窗口 大 小 动态 改变 列 数 ) 

2017 年 9 月 10 日 ,中国 ”会议 、10 场 高 峰 论坛 、 ”的 重要 组 成 部 分 ， 共 有 ”发 表 讲话 ， 表 示 要 让 物 
无 锡 ， 太 湖 之 滨 ，2017 ”1 场 物 联网 应 用 和 产品 。 来 自 中 、 美 、 英 、 法 、 ”联网 发 展 的 ! nam 
第 二 届 世 界 物 联网 博览 展览 展示 等 8 场 系列 活 。 德 、 日 、 意 等 21 个 国家 出。 会 议 由 江 3 

大 会 再 次 成 为 全 球 物 联动 ， 对 于 推动 物 联 网 发 ”和 地 区 的 参展 企业 522 — 政 隆 主持 。 阿 里 巴巴 、 
网 行业 瞩目 之 地 。 展 、 促 进 产业 转型 升级 。 家 ， 特 装 独立 展位 达到 华为 等 企业 家 代表 也 进 
本 届 物 博 会 为 期 4 天 (9 。 具有 重要 意义 。 158X. 行 了 讲话 。 

月 10 日 至 13 日 ) , 将 围 ” 据 了 解 ， 物 联网 应 用 和 江苏 省 委 书 记 李 强 在 今 

绕 “ 物 联 世界 、 共 创 未 ”产品 展览 展示 会 作为 天 上 午 举行 的 物 联网 无 

来 ”的 主题 举行 1 场 主 。 2017 世 界 物 联网 博览 会 锡 峰 会 上 对 物 联网 发 展 


图 17-3 程序 运行 初始 效果 


3 
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lE 


改变 窗口 大 小 时 ， 例 如 将 窗口 宽度 变 窗 ， 内 容 显 示 列 数 将 变 少 ， 如 图 17-4 所 示 。 








"We -ox 
D Wehner x 


€ - C O 1270.0.1:3020/ch17/17: 


width: 50%; columns: 100px 4; ENS RO 
2017 年 9 月 10 日 ,中国 无 HARE 

m, 太湖 之 演 。 2017 第 二 ®. A. redes 

届 世 界 物 联 网 情 览 大 会 再 次 地 区 的 参展 企业 522 家 , 
Pr 特 甘 独立 展位 达到 158 R, 


江苏 省 委 书 记 李 强 在 今天 
本 加 向 二 4 天 (9 有 10 上 午 举行 的 物 i 
日 至 13 日 ) , SER MR 。 会 上 对 物 联 网 发 展 发 表 讲 


坛 、1 场 物 联网 应 用 和 产品 江苏 省 长 吴 政 隆 主持 。 阿 
ee, 里 巴巴 、 华 为 等 企业 家 代 
推动 物 联 网 发 展 , 分 ， 表 也 进行 了 讲 


图 17-4 根据 窗口 宽度 变化 动态 改变 内 容 显 示 列 数 
17.12 ”设置 列 间距 


默认 情况 下 ， 浏 览 器 根据 列 数 和 列 宽 来 计算 出 列 间 距 。 但 在 实际 项 目 中 ， 默 认 列 间距 用 
得 比较 少 ， 更 多 时 候 需 要 指定 列 间 距 。 

在 CSS3 的 多 栏 布局 中 ，column-gap 子 属性 用 来 指定 列 间距 ， 默 认 值 为 nomal， 相 当 于 
lem。 需 要 注意 的 是 ， 如 果 column-gap 与 column-width 加 起 来 大 于 总 宽度 ， 就 无 法 显示 
column-count 指定 的 列 数 ， 会 由 浏览 器 自动 调整 列 数 和 列 宽 。 


17.1.3 ”设置 列 边框 


由 于 浏览 器 宽度 有 限 ， 当 列 数 过 多 时 ， 列 与 列 之 间 的 间隔 会 比较 窗 ， 密 密 麻 麻 ， 不 方便 
阅读 。 这 时 候 可 以 在 列 与 列 之 间 设 置 一 条 边框 线 ， 使 版 面 看 起 来 更 清晰 。 

column-rule 用 于 设置 列 边框 ， 类 似 于 border， 区 别 是 不 占用 任何 空间 ， 因 此 设置 
column-rule 不 会 导致 列 宽 的 变化 。 另 外 ， 如 果 边框 宽度 大 于 column-gap 列 间 距 ， 将 不 会 显示 
边框 。column-rule 的 语法 和 border 类 似 ， 例 如 column-rule: 1px solid 4000: . 

【 例 17-3】 为 多 栏 布局 添加 分 隔 线 。 

HTML 代码 和 例 17-2 相同 。CSS 代码 如 下 : 














-moz-columns: auto 4; 
-webkit-columns: auto 4; 
columns: auto 4; 
-moz-column-rule: 1px solid #f00; 
-webkit-column-rule: 1px solid #f00; 
column-rule: 1px solid #f00; 
} 
运行 程序 ， 效 果 如 图 17-5 所 示 。 可 以 看 到 ， 多 栏 布 局 之 间 多 了 红色 的 分 隔 线 。 


column-rule: 1px solid #000; 
2017 年 9 月 10 日 ， 中 国 | 会 议 、10 场 高 峰 论坛 、 | 的 重要 组 成 部 分 ， 共 有 | 发 表 讲 话 ， 表 示 要 让 物 
FB, 太湖 之 滨 。2017 | 1 场 物 联网 应 用 和 产品 | 来 自 中 、 美 、 英 、 法 、 | 联网 发 展 的 朝阳 叶 薄 而 
第 二 届 世 界 物 联网 博览 | 展览 展示 等 8 场 系列 | 德 、 日 、 意 等 21 个 国家 | 出 。 会 议 由 江苏 省 长 
大 会 再 次 成 为 全 球 物 联 | 活动 ， 对 于 推动 物 联 网 | 和 地 区 的 参展 企业 522 | SBIEH, EE 
网 行业 乱 目 之 地 . 发 展 、 促 进 产业 转型 升 | 家 ， 特 装 独 立 展位 达到 | 巴 、 华 为 等 企业 家 代表 
本 届 物 博 会 为 期 4 天 (9 | 级 具有 重要 意义 - 1585. 也 进行 了 讲话 。 

月 10 日 至 13 日 ) , 将 国 | 据 了 解 , 物 联网 应 用 和 | 江苏 省 委 书 记 李 强 在 信 

绕 RER, ROR | 产品 展览 展示 会 作为 | 天 上 午 举行 的 物 联 网 无 

来 ”的 主题 举行 1 场 主 | 2017 世 界 物 联网 博览 会 | 锡 桥 会 上 对 攀 联网 发 展 


图 17-5 添加 分 隔 线 之 后 的 效果 
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17.1.4 ”设置 跨 列 标题 


很 多 时 候 ， 一 篇 文章 需要 以 多 栏 的 方式 显示 内 容 ， 但 有 共同 的 标题 ， 而 标题 不 属于 任何 
一 列 ， 标 题 是 所 有 内 容 的 标题 。 因 此 ， 在 排版 时 ， 经 常 将 标题 放 在 顶部 并 跨 列 显示 。 
在 CSS3 的 多 栏 布局 中 ， 跨 列 显示 通过 column-span 子 属性 来 实现 。column-span 子 属性 有 
两 个 取 值 : 默认 值 none 表示 不 跨 列 , all 表示 跨越 所 有 列 。 例 如 , 文章 标题 可 以 设 成 al 来 跨 列 。 
【 例 174】 标题 跨 列 显示 。 
HTML 代码 如 下 : 
<b>h3:column-span: all; (Firefox No support)-/b 
«div class="wrapperl"> 
«322017 第 二 届 世 界 物 联网 博览 大 会 </h3> 
<p>2017 年 9 月 10 日 ， 中 国 无 锡 ， 太 湖 之 滨 。2017 第 二 届 世 界 物 联网 博览 大 会 再 次 成 为 全 球 物 
联网 行业 瞩目 之 地 。</p> 
<p> 本 届 物 博 会 为 期 4 天 (9 月 10 日 至 13 日 )， 将 围绕 “ 物 联 世界 、 共 创 未 来 ”的 主题 举行 1 场 主 
会 议 、10 场 高 峰 论坛 、1 场 物 联网 应 用 和 产品 展览 展示 等 8 场 系列 活动 ， 对 于 推动 物 联网 发 展 、 促 进 产 
业 转 型 升级 具有 重要 意义 。</p> 
<p> 据 了 解 ， 物 联网 应 用 和 产品 展览 展示 会 作为 2017 世界 物 联网 博览 会 的 重要 组 成 部 分 ， 共 有 来 
自 中 、 美 、 英 、 法、 德 、 日 、 意 等 21 个 国家 和 地 区 的 参展 企业 522 家 ， 特 装 独立 展位 达到 158 Xe </p> 
<p> 江 苏 省 委 书 记 李 强 在 今天 上 午 举行 的 物 联网 无 锡 峰 会 上 对 物 联 网 发 展 发 表 讲 话 ， 表 示 要 让 物 
联网 发 展 的 朝阳 喷 薄 而 出 。 会 议 由 江苏 省 长 吴 政 隆 主持 。 阿 里 巴巴 、 华 为 等 企业 家 代表 也 进行 了 讲话 。 
<p> 
</div> 
CSS 代码 如 下 : 
-wrapperl { 
-moz-columns: auto 4; 
-webkit-columns: auto 4; 
columns: auto 4; 
} 
D3 { 
margin: 0; 
text-align: center; 
border-bottom: 2px solid &ccc; 
-moz-column-span: all; 
-webkit-column-span: all; 
column-span: all; 
H 
运行 程序 ， 效 果 如 图 17-6 所 示 。 可 以 看 到 ， 标 题 “2017 第 二 届 世 界 物 联网 博览 大 会 ” 
横 跨 了 4 列 。 





h3:column-span: all; riso No support) 
017 第 二 届 世 界 物 联 网 博览 大 会 
RUM. RAUR BTE, 物 联网 应 用 和 江苏 省 委 书记 李强 在 今 
2017 年 9 月 10 日 , 中 国 x 的 主题 举行 1 场 主 。 产品 展览 展示 会 作为 。。 天 上 午 举行 的 物 联网 无 


xm 会 - 
2017 第 二 尾 世 界 物 联 1 二 条 网 应 用 和 产品 。 会 的 和 要 给 成 部 分 , it BENE, EIE) 
网 博览 大 会 再 次 成 为 全 展览 展示 等 8 场 系列 。。 有 来 自 中、 美英 、 。。 联网 发 展 的 朝阳 陵 落 而 
U RRUAR 活动 ， 对 于 推动 物 联网 “法 、 德 、 日 、 意 等 21 个 “出 。 会 议 由 江苏 省 长 


级 上 有 至 要 意义 . 522 家 , 特 装 独立 展位 B. 华为 等 企业 家 代表 


Fr 达到 158 家 。 "BOT. 


月 10 日 至 13 日 ) , 158 


图 17-6 标题 跨 列 效果 
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17.1.5 “统一 列 高 


column-fill 子 属性 用 于 统一 列 高 。 默 认 值 为 aato， 各 列 的 高 度 随 内 容 自动 调整 ， 当 设置 
为 balance 时 ， 所 有 列 的 高 度 都 设 为 最 高 的 列 高 。 
【 例 17-5】 统一 列 高 。 
HTML 页 面 代码 如 下 : 
<b>column-fill: balance;</b> 
<div class="wrapper4"> 
<p>2017 年 9 月 10 日 ， 中 国 无 锡 ……</p> 
<p> 本 届 物 博 会 为 期 4 天 (9 月 1……</p> 
<p> 据 了 解 ， 物 联网 应 用 和 产 ……</p> 
<p> 江 苏 省 委 书 记 李强 在 今 ……</p> 
</div> 
CSS 代码 如 下 : 
wrapper4 { 
-moz-columns: auto 4: 
-webkit-columns: auto 4; 
columns: auto 4: 
-webkit-column-fill: balance: 
-moz-column-fill: balance; 
column-fill: balance; 
) 
运行 程序 ， 效 果 如 图 17-7 所 示 。 从 图 17-7 中 可 知 ， 统 一 列 高 之 后 ， 当 最 后 一 栏 的 内 容 
不 满 栏 时 ， 将 以 空白 填补 ， 直 到 和 其 他 列 的 高 度 相同 。 
column-fill: balance; 


2017 年 9 月 10 日 ， 中 国 。 会 议 、10 场 高 峰 论坛 、 ”的 重要 组 成 部 分 ， 共 有 ERE, 表示 亚 让 物 

FiB, 太湖 之 滨 。2017 ”1 场 物 联网 应 用 和 产品 RAP. F. E A ”联网 发 展 的 朝阳 喷 薄 而 

第 二 届 世 界 物 联 网 博览 。 展览 展示 等 8 场 系列 德 .日 、 意 等 21 个 国家 ”出 会 议 由 江苏 省 长 

大 会 再 次 成 为 全 球 物 联 活动， 对 于 推动 物 联网 ”和 地 区 的 参展 企业 522 。 吴 政 降 主 持 . 阿里 巴 
5 家 ， 特 装 独 立 展位 i 


位 达到 巴 、 华 为 等 企业 家 代表 
本 届 物 博 会 为 期 4 天 (9 。 级 具有 重要 意义 。 1585. 也 进行 了 讲话 。 

月 10 日 至 13 日 ) , M 。 据 了 解 ， 物 联网 应 用 和 江苏 省 委 书 记 李 强 在 今 

绕 “ 物 联 世 界 、 共 创 未 ”产品 展览 展示 会 作为 ” ”天 上 午 举行 的 物 联网 无 

来 ”的 主题 举行 1 场 主 。 2017 世 界 物 联网 博览 会 锡 峰 会 上 对 物 联网 发 展 


图 17-7 统一 列 高 效果 


172 4h) 


17.2.1 CSS 盒子 模型 


所 有 HIML 元 素 都 可 以 看 作 盒子 。 在 CSS 中 ， 
“盒子 模型 ”这 一 术语 用 在 设计 和 布局 中 。 

CSS 盒子 模型 木质 上 是 一 个 盒子 ， 用 来 封装 
HTML 元 素 ， 包 括 边 距 、 边 框 、 填 充 和 实际 内 容 。 
盒子 模型 允许 开发 人 员 在 其 他 元 素 和 周围 元 素 
边框 之 间 的 空间 放置 元 素 。 盒 子 模型 的 结构 如 
图 17-8 所 示 ， 其 中 ， 各 部 分 的 含义 如 下 

e Margin( 外 边 距 ): 边框 外 的 区 域 ， 外 边 距 图 17-8 盒子 模型 
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是 透明 的 。 
e Border): 围绕 在 内 边 距 和 内 容 外 的 边框 。 
e 了 Padding( 内 边 距 ): 内容 到 边框 之 间 的 区 域 ， 内 边 距 是 透明 的 。 
e Cote AX): 盒子 的 内 容 区 域 ， 显 示 文 本 和 图 像 。 
要 想 掌握 盒子 布局 的 方法 ， 必 须 先 知道 盒子 模型 的 工作 原理 。 默 认 情 况 下 ,指定 CSS 元 
素 的 宽度 和 高 度 ， 只 是 设置 了 内 容 区 域 的 宽度 和 高 度 。 要 知道 ， HTML 页 面 的 完整 大 小 还 包 
括 填充 、 边 框 和 边 距 。 
例如 ， 下 面 的 例子 中 元 素 的 总 宽度 为 300px: 
div 
pus 300px; 
border: 25px solid green; 
padding: 25px; 
margin: 25px; 








} 
实际 宽度 为 : 300px( 宽 度 )+ 50px( 左 右 填充 )+ 50px( 左 右边 框 )+ S0px( 左 右边 距 ) 450px- 
因此 ， 若 只 有 250 像素 的 空间 ， 要 设置 总 宽度 为 250 像素 的 元 素 ， 代 码 如 下 : 


div ( 
width: 220px; 
padding: 10px; 
border: 5px solid gray; 
margin: 0; 

} 


由 此 可 得 ， 元 素 的 总 宽度 和 总 高 度 计 算 公式 如 下 : 
元 素 的 总 宽度 = 宽度 + 左 填充 + 右 填充 + 左边 框 + 右边 框 + 左边 距 + 右 边 距 
元 素 的 总 高 度 = 高 度 + 顶 部 填充 + 底部 填充 + 上 边框 + 下 边框 + 上 边 距 + 下 边 距 
17.22 ”使 用 盒 布局 
在 CSS3 中 ， 通 过 box 属性 来 使 用 盒 布局 。 在 Firefox 浏览 器 中 ， 书 写成 -moz-box; 在 
Chrome、Safari 或 Opera 浏览 器 中 ， 书 写成 -webkit-box。 下 面 首先 介绍 使 用 传统 float 属性 布 


局 页 面 的 缺陷 ， 然 后 介绍 使 用 盒 布局 的 好 处 。 
【 例 17-6】 使 用 float 属性 进行 页 面 布局 。 





<head> 
<meta charset="UTF-8"> 
<title> 盒 布局 </title> 
<style> 
#left-sidebar { 
float: left: 
width: 200px: 
padding: 20px: 
background-color: orange: 
H 
Zcontent ( 
float: left: 


width:300px: 
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padding: 20px; 
background-color: yellow: 
} 
#right-sidebar{ 
float: left; 
width: 200px: 
padding: 20px; 


background-color: limegreen: 


} 
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?ilefi-sidebar content zright-sidebar { 


box-sizing: border-box; 
j 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="left-sidebar"> 
<h2> 左 侧 边栏 </h2> 
«ul- 


<li><a hre 伍 "#> 超 链接 </a></li> 
<li><a hre 伍 "#'> 超 链接 </a></li> 
<li><a hre 仁 "#> 超 链接 </a></li> 
<li><a hre 伍 "# 人 > 超 链 接 </a></li> 
<li><a bre 全 "加 > 超 链接 </a></li> 


< 

</div> 

<div id="content"> 
<h2> 正 文 内 容 <h2> 
<p>2017 年 9 月 10 日 , 中 

















无 锡 ， 太 湖 之 滨 。2017 第 二 届 世 界 物 联网 博览 大 会 


再 次 成 为 全 球 物 联网 行业 瞩目 之 地 。 本 届 物 博 会 为 期 4 RO 月 10 日 至 13 日 )， 将 围绕 “ 物 联 世界 、 共 
创 未 来 ”的 主题 举行 1 场 主 会 议 、10 场 高 峰 论坛 、1 场 物 联网 应 用 和 产品 展览 展示 等 8 场 系列 活动 ， 对 
于 推动 物 联网 发 展 、 促 进 产业 转型 升级 具有 重要 意义 。 据 了 解 , 物 联网 应 用 和 产品 展览 展示 会 作为 2017 
世界 物 联网 博览 会 的 重要 组 成 部 分 ， 共 有 来 自 中 、 美 、 英 、 法 、 德 、 日 、 意 等 21 个 国家 和 地 区 的 参展 
企业 522 家 , 特 装 独立 展位 达到 158 Ko 江苏 省 委 书 记 李 强 在 今 大 上 午 举 行 的 物 联网 无 锡 峰会 上 对 物 联 
网 发 展 发 表 讲 话 ， 表 示 要 让 物 联 网 发 展 的 朝阳 喷 薄 而 出 。 会 议 由 江苏 省 长 吴 政 隆 主持 。 阿 里 巴巴 、 华 为 





等 企业 家 代表 
<p> 
</div> 
<div id="right-sidebar"> 
<h2> 右 侧 边栏 <h2> 
«ub 
<li><a href="#"> 5EBc-/a-—/li- 
<li><a href="#"> ti pE </a><Ni> 
<li><a hre 人 ="# 人 > 超 链接 </a></li> 
<h> 
</div> 
</div> 
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运行 程序 ， 效 果 如 图 17-9 所 示 。 从 图 17-9 中 可 以 看 出 ，div 元 素 的 大 小 默认 由 其 内 容 多 
少 而 定 。 当 3 个 div 元 素 中 的 内 容 大 小 不 一 样 时 ， 这 3 个 div 元 素 的 大 小 便 不 一 样 。 如 果 想 
要 这 3 个 div 元 素 具 有 相同 的 高 度 ， 那 么 需要 在 经 过 计算 之 后 ， 为 这 3 个 div 元 素 指定 相同 
的 宽 高 值 。 

















[ we -o x 
D foat 布 局 x 


[e Œ © 127.0.0.1:8020/ch17/17-6.htm 











图 17-9 ”使 用 float 属性 布局 的 效果 


下 面 使 用 CSS3 的 盒 布 局 来 修改 上 面 的 例子 ， 看 看 效果 如 何 。 
【 例 17-7】 使 用 盒 布 局 修改 例 17-6 中 的 样式 。 

















<style> 
#container{ 
display: -moz-box; 
display: -webkit-box; 
} 
#left-sidebar { 
width: 200px; 
padding: 20px; 
background-color: orange; 
} 
#content{ 
width:300px; 
padding: 20px; 
background-color: yellow; 
3 
width: 200px; 
padding: 20px; 
background-color: limegreen; 
} 
#left-sidebar.#content #right-sidebar { 
box-sizing: border-box; 
} 


</style> 


运行 程序 ， 





行 布局 时 ， 左 右 两 栏 或 多 栏 

















在 实际 项 目 中 
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效果 如 图 17-10 所 示 。 将 该 图 与 图 17-8 比较 ， 可 以 看 出 ， 使 用 float 属性 进 





FP. div 元 素 由 于 内 容 大 小 不 一 样 ， 导 致 div 高 度 不 一 致 ， 因 此 底 
部 无 法 对 齐 。 改 为 CSS3 的 盒 布 局 之 后 ， 这 个 问题 就 解决 了 。 





D £s. 
€ > © QO12700.18020/ch17/17-7 html 





we - n0 x 








图 17-10 ”使 用 盒 布局 修改 例 17-6 之 后 的 效果 
17.2.3 盒 布局 和 多 栏 布局 的 区 别 

盒 布 局 和 多 栏 布 局 的 区 别 在 于 : 使 用 多 栏 布局 时 ， 各 栏 的 宽度 必须 是 相等 的 ， 在 指定 每 
栏 的 宽度 时 ， 也 只 能 为 所 有 栏 指定 统一 的 宽度 。 另 外 ， 使 用 多 栏 布 局 时 ， 也 不 可 能 具体 指定 
什么 栏 中 显示 什么 内 容 ， 因 此 比较 适合 在 显示 文章 内 容 的 时 候 使 用 ， 不 适合 用 来 安排 整个 网 
页 中 由 各 元 素 组 成 的 网 页 结构 。 





17.3 ERT 


P， 网 站 的 布局 要 比 我 们 想象 的 复杂 ， 光 靠 前 面 介 绍 的 多 栏 布 局 和 盒 布 局 还 


远 远 不 够 。 本 节 将 介绍 一 种 更 为 灵活 的 布局 -一 弹性 盒 布 局 。 这 也 是 CSS3 中 新 增 的 一 种 布 





局 方式 。 
17.3.1 





对 多 个 元 素 使 用 flex 属性 


在 上 一 节 介绍 的 盒 布 局 中 ， 对 代表 左 侧 边栏 、 中 间 内 容 栏 、 右 侧 边栏 的 3 个 div 元 素 的 





宽度 都 进行 了 设 定 。 要 想 让 这 3 个 div 元 素 的 总 宽度 等 于 浏览 器 窗口 的 宽度 ， 而 且 能 够 随 着 
窗口 宽度 的 改变 而 改变 ， 应 该 怎么 设置 呢 ? 




















在 使 用 





能 够 达到 这 个 要 求 ; 但 是 如 果 使 有 

















局 即 可 。 





float 或 position 





属性 





叶 ， 需 要 使 用 包括 负 外 边 距 在 内 的 比较 复杂 的 指定 方法 才 














盒 布 局 ， 只 需要 使 用 ex 属性 ， 使 盒 布 局 变 为 弹性 盒 布 





下 面 针对 例 17-7， 对 样式 代码 进行 修改 ， 将 表示 左 侧 边栏 和 右 侧 边栏 的 两 个 div 元 素 的 
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宽度 指定 为 200px， 在 表示 中 间 内 容 的 div 元 素 的 样式 代码 中 去 掉 原来 的 指定 宽度 为 300px 
的 样式 代码 ， 改 用 flex 属性 指定 。 
【 例 17-8】 使 用 弹性 盒 布局 进行 页 面 排 版 。 





























#container{ 
} 
#left-sidebar { 
width: 200px; 
padding: 20px; 
background-color: orange; 
} 
#content{ 
flex: 1; 
padding: 20px; 
background-color: yellow; 
} 
fright-sidebar( 
width: 200px; 
padding: 20px; 
background-color: limegreen; 
} 
#left-sidebar.#content,#right-sidebar{ 


box-sizing: border-box; 


} 
运行 程序 ， 效 果 如 图 17-11 所 示 。 从 图 17-11 中 可 以 看 出 ， 随 着 窗口 宽度 变 大 ， 中 间 正 文 
内 容 的 div 元 素 会 自动 拉 伸 ， 填 满 宽度 ， 如 果 窗 口 宽度 变 小 ， 中 间 的 正文 内 容 会 自动 缩减 显示 
区 域 。 


WW - 0 x 
D 入 性 前 布局 


€ > C |O 1270018020/c17/17-Bhtml 

















图 17-11 使 用 弹性 盒 布局 的 效果 
17.82 ”设置 元 素 的 显示 顺序 
使 用 弹性 盒 布 局 时 ， 可 以 通过 order 属性 来 改变 各 元 素 的 显示 顺序 。 可 以 在 每 个 元 素 的 
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样式 中 加 入 order 属性 , 浏览 器 在 显示 元 素 的 时 候 将 根据 order 属性 的 值 , 按 从 小 到 大 的 顺序 排列 。 
【 例 17-9】 设置 元 素 的 显示 顺序 。 
HTML 页 面 代码 与 例 17-6 相同 。CSS 样式 代码 如 下 : 





<style> 
#container{ 
display: flex; 
j 
#left-sidebar ( 
width: 200px; 
padding: 20px; 
background-color: orange; 
b 
#content{ 
order: 1; 
flex: 1; 
padding: 20px; 
background-color: yellow; 
j 
#right-sidebar{ 
order: 2; 
width: 200px; 
padding: 20px; 
background-color: limegreen; 
} 
#left-sidebar,#content,#right-sidebar { 
box-sizing: border-box; 
) 
</style> 


运行 以 上 程序 ， 效 果 如 图 17-12 所 示 。 可 以 看 到 ， 虽 然 没 有 改变 页 面 代码 ， 但 是 通过 使 
用 order 属性 ， 直 接 改变 了 元 素 的 显示 顺序 。 这 样 ， 页 面 元 素 的 显示 次 序 再 也 不 受 书 写 顺序 
的 约束 ， 使 得 排版 更 灵活 。 


D sarama 
€ > C |O 1270015020/ch17/17-9htm 











图 17-12 改变 元 素 显示 顺序 后 的 效果 
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17.3.3 ”设置 元 素 的 排列 方向 


使 用 弹性 盒 布局 时 ， 可 以 方便 地 指定 多 个 元 素 的 排列 方向 ， 主 要 使 用 flex-direction 属性 
来 实现 。 该 属性 的 取 值 包括 如 下 4 个 : 

e row: 默认 值 ， 横 向 排列 。 

e row-reverse: 横向 反 向 排列 。 

e column: 纵向 排列 。 

e ”column-reverse: 纵向 反 向 排列 。 

例如 ， 针 对 例 17-9， 可 以 对 样式 代码 做 如 下 修改 : 在 id 为 container 的 容器 元 素 中 加 入 
flex-direction 属性 ， 并 设置 属性 值 为 column( 表 示 纵 向 排列 )， 代 码 示例 中 代表 左 侧 边栏 、 中 
间 内 容 、 右 侧 边栏 的 3 个 div 元 素 的 排列 方向 为 垂直 方向 。 

【 例 17-10】 改变 元 素 的 排列 方向 。 

HTML 页 面 代码 与 例 17-6 相同 ,在 CSS 样式 代码 中 , 将 container 的 样式 修改 为 如 下 所 示 : 












































#container{ 
display: flex; 
flex-direction: column; 
j 
运行 程序 ， 效 果 如 图 17-313 所 示 。 可 以 看 出 ， 页 面 上 的 div 元 素 按照 显示 顺序 进行 了 垂 


直 排列 。 


D ramma 
€ «| C O1270013020/ch! 











图 17-13 ”改变 排列 方向 后 的 效果 
17.3.4 ”定义 宽 高 自 适应 


使 用 盒 布 局 时 ， 元 素 的 宽度 和 高 度 具 有 自 适应 性 ， 即 元 素 的 宽度 和 高 度 可 以 根据 排列 方向 
的 改变 而 改变 。 通 过 例 17-11 可 以 清楚 地 看 出 此 特性 。 示 例 中 有 一 个 容器 元 素 ， 这 个 容器 元 素 
中 有 3 个 div 元素， 但 只 对 容器 元 素 指定 了 宽度 和 高 度 。 从 运行 结果 中 可 以 看 出 ， 当 排列 方向 
被 指定 为 水 平方 向 排列 时 ，3 个 div 元 素 的 宽度 为 元 素 中 内 容 元 素 的 宽度 高 度 自动 变 为 容器 
元 素 的 高 度 ， 当 排列 方向 被 指定 为 垂直 方向 排列 时 ，3 个 div 元 素 的 高 度 为 元 素 中 内 容 的 高 度 ， 
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宽度 自动 变 为 容器 元 素 的 宽度 。 
【 例 17-11】 元 素 宽度 和 高 度 的 自 适应 。 

<style type="text/css"> 

#container{ 
display: flex; 
width: 500px; 
height: 300px; 
flex-direction: row; 
border: solid 3px green; 


) 
#a-area ( 
background-color: blue; 
) 
sib-area( 
background-color: yellowgreen; 
} 
#c-area{ 
background-color: green; 
} 


#a-area,#b-area,#c-area{ 
box-sizing: border-box: 
font-size: 1.5em; 
color: white: 
font-weight: bold: 


<body> 
«div id="container"> 
<div id="a-area"><h3>A 区 域 </h3></div> 
«div id="b-area"><h3>B 区 域 </h3></div> 
«div id="c-area"><h3>C 区 域 </h3></div> 
</div> 
</body> 
运行 以 上 代码 ， 效 果 如 图 17-14 所 示 ， 元 素 的 排列 方向 被 设置 为 水 平 排列 。 











Ws - 0 x 
D suERUBENER 
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A 区 域 B 医 域 C 区 二 











图 17-14 水 平方 向 排列 效果 
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对 示例 代码 稍 作 修改 ， 将 容器 元 素 的 样式 代码 中 的 排列 方向 改 为 垂直 方向 ， 样 式 代码 如 下 : 
#container{ 
display: flex; 
width: 500px; 
height: 300px; 
flex-direction: column; 
border: solid 3px green; 





j 
运行 代码 ， 元 素 按 垂 直方 向 排列 后 ， 效 果 如 图 17-15 所 示 。 
D 元 素 这 高 自 适 应 x ji rece | 
E Q Q127001 | 
A 区 域 
C 区 域 











图 17-15 ”元素 垂 直 排列 的 自 适 应 效果 


从 图 17-14 和 图 17-15 可 以 看 出 ， 虽 然 对 页 面 使 用 了 盒 布局 ， 使 得 元 素 的 高 度 和 宽度 具 
有 一 定 的 自 适 应 ， 但 容器 总 是 会 空 出 一 大 片 空白 区 域 ， 用 户 体验 非常 不 好 。 


17.3.5 “消除 空白 


本 节 针 对 上 一 节 提 出 的 空白 问题 ， 改 用 弹性 盒 布 局 来 解决 ， 使 得 页 面 中 多 个 元 素 的 总 宽 
度 和 总 高 度 始终 等 于 容器 的 宽度 和 高 度 。 

【 例 17-12】 消除 空白 。 

HTML 页 面 代码 与 上 一 节 的 示例 一 样 ，CSS 样式 代码 如 下 : 


«style type="text/css"> 
#container{ 
display: flex; 
width: 500px; 
height: 300px; 
flex-direction: row; 
border: solid 3px green; 
3 
#a-area ( 
background-color: blue: 
和 
#b-area{ 


background-color: yellowgreen; 
flex: 1; 
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} 
#c-area{ 
background-color: green; 
j 
#a-area.#b-area.#c-area{ 
box-sizing: border-box; 
font-size: 1.5em; 
color: white; 
font-weight: bold; 
) 
</style> 
以 上 代码 在 中 间 那 个 div 元 素 的 样式 代码 中 加 入 flex 属性 。 运 行程 序 ， 效 果 如 图 17-16 
所 示 。 
将 排列 方向 改 为 垂直 方向 ， 运 行程 序 ， 效 果 如 图 17-17 所 示 。 
us - o0 x w - 0 x 
D 消除 空白 x D men 
€ > QC O 1270018020 html ; € > e 0127001 


A 区 域 B 区 域 














图 17-16 ”使 用 弹性 盒 布 局 后 的 元 素 排 列 效果 图 17-17 ” 改 为 科 直 排列 后 的 元 素 排列 效果 


从 图 17-16 和 图 17-17 可 以 看 出 ， 如 果 使 用 弹性 盒 布 局 ， 使 用 了 box-flex 属性 的 元 素 的 
宽度 和 高 度 总 会 自动 扩大 ， 使 得 元 素 的 总 宽度 和 总 高 度 始终 等 于 容器 元 素 的 高 度 和 宽度 。 


17.86 ”灵活 使 用 flex 属性 


1. 对 多 个 元 素 使 用 flex 属性 
前 面 的 示例 都 只 对 一 个 元 素 使 用 flex 属性 ， 使 其 宽度 和 高 度 自动 扩大 ， 让 浏览 器 和 容器 
中 所 有 元 素 的 总 宽度 或 总 高 度 等 于 浏览 器 或 容器 的 宽度 或 高 度 。 在 CSS3 中 ， 也 可 以 对 多 个 
元 素 使 用 flex 属性 。 例如, 下面 的 例 17-13 为 例 17-12 所 示 容 器 中 的 前 两 个 div 元 素 的 样式 代 
码 使 用 flex 属性 ， 元 素 排列 方向 为 垂直 排列 。 
【 例 17-13]. 对 多 个 元 素 使 用 flex 属性 。 
HTML 页 面 结构 不 变 。CSS 样式 代码 如 下 : 
#container{ 
display: flex; 
width: 500px; 
height: 300px; 
border: solid 5px green; 
flex-direction: column; 
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H 
#a-area ( 
background-color: blue; 
flex: 1; 
} 
#b-area{ 
background-color: yellowgreen; 
flex: 1; 
} 
#c-area{ 
background-color: green; 
} 


运行 程序 ， 效 果 如 图 17-18 所 示 。 可 以 看 出 ， 前 两 个 div 元 素 的 高 度 都 自动 扩大 了 ， 并 
HRPA div 元 素 的 高 度 保持 相等 ， 而 第 三 个 div 元 素 的 高 度 仍 保持 为 元 素 内 容 的 高 度 。 

如 果 在 3 个 div 元 素 的 样式 代码 中 都 使 用 fex 属性 ， 那 么 每 个 div 元 素 的 高 度 就 等 于 容 
器 高 度 的 三 分 之 一 ， 如 图 17-19 所 示 。 





D 对 多 个 元 素 用 flex 属 性 。 x B D 对 多 个 元 素 用 flex 届 性 
€ > QC ©1270.0.1:8020 t :| < ec ol127001 17-13.html 


A 区 域 A 区 域 


C 区 域 











图 17-18 ”对 多 个 元 素 使 用 flex 属性 后 的 效果 图 17-19 对 3 个 div 元 素 使 用 flex 属性 的 效果 





到 目前 为 止 ， 我们 为 元 素 设置 flex 属性 时 ， 都 是 设置 为 1。 如 果 设 置 的 属性 值 大 于 1， 
显示 效果 如 何 ? 
【 例 17-14】 将 元 素 的 flex 属性 值 设 置 为 大 于 1 的 值 。 
#container{ 
display: flex; 
width: 500px; 
height: 300px; 
border: solid 5px green; 
flex-direction: column; 
color:white; 
! 
#a-area ( 
background-color: blue; 
flex: 2: 
h 
#b-area{ 
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background-color: yellowgreen; 
flex: 1; 
} 
#c-area{ 
background-color: green; 
flex: 1; 


} 
以 上 代码 将 容器 的 高 度 修改 为 200px, 在 每 个 div 子 元 素 的 样式 代码 中 均 使 用 flex 属性 ， 
但 是 将 第 一 个 div 元 素 的 flex 属性 设 定 为 2， 其 他 两 个 div 子 元 素 的 flex 属性 仍 保留 为 1， 元 


素 排列 方向 为 垂直 排列 。 运 行 代码 ， 效 果 如 图 17-20 所 示 。 









^| 对 多 个 元 素 用 flex 属 性 


€ C ©127001 i 








A 区 域 
B 区 域 
C 区 域 


图 17-20 flex 属性 值 大 于 1 的 效果 





从 图 17-20 中 可 看 出 ,第 一 个 div 子 元 素 的 高 度 并 不 等 于 其 他 两 个 div 子 元 素 的 两 倍 。flex 
属性 的 属性 值 的 正确 含义 如 图 17-21 所 示 。 











图 17-21 容器 空白 部 分 按 元 素 的 flex 属性 值 分 配 


2. flex-grow 属性 
可 以 使 用 flex-grow 属性 来 指定 元 素 的 宽度 和 高 度 ， 但 是 该 属性 对 元 素 宽度 的 计算 方法 
与 flex 属性 有 所 不 同 。 
【 例 17-15】 使 用 flex-grow 属性 指定 元 素 的 宽度 和 高 度 。 
«style type="text/css"> 
#container{ 
display: flex; 
width: 600px; 
height: 300px; 
border: solid 5px green; 
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flex-direction: row; 
color:white; 
) 
#a-area ( 
background-color: blue; 
} 
#b-area{ 
background-color: yellowgreen; 
} 
#c-area{ 
background-color: green; 
} 
#a-area,#b-area,#c-area{ 
box-sizing: border-box; 
font-size: 1.5em; 
font-weight: bold; 
width: 150px; 
flex-grow: 1; 
j 
</style> 
在 以 上 代码 中 ， 将 所 有 div 子 元 素 的 flex-grow 属性 设置 为 1， 宽度 为 150px。 指 定 第 二 
个 div 子 元 素 的 flex-grow 属性 为 3， 元 素 排 列 方向 为 水 平方 向 ， 将 容器 元 素 的 宽度 修改 为 
600px。 运 行 代码 ， 效 果 如 图 17-22 所 示 。 


D flecgrow 


€ > C O127001 
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图 17-22 ”指定 flex-grow 属性 后 的 效果 





在 本 例 中 ， 当 使 用 flex-grow 属性 计算 元 素 宽度 的 时 候 ， 计 算 步 骤 如 下 : 

(1). 容器 宽度 (600px)-153( 每 个 div 子 元 素 的 宽度 )x3=150px。 

(2) 3 个 div 子 元 素 的 宽度 的 flex-grow 属性 值 之 和 : 150=5=30px。 

(3) 第 一 个 和 第 三 个 div 子 元 素 的 宽度 均等 于 :width 属性 值 150+flew-grow 属性 值 30x1= 
180px。 

(4) 同 理 ， 第 二 个 div 子 元 素 的 宽度 等 于 150+30x3=240px。 

3. flex-shrink 属性 

可 以 使 用 flex-shrink 属性 来 指定 元 素 的 宽度 或 高 度 , 该 属性 和 flex-grow 属性 的 区 别 在 于 : 
当 元 素 排列 方向 为 横向 排列 时 ， 如 果子 元 素 的 width 属性 值 之 和 小 于 容器 元 素 的 宽度 ， 就 必 
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须 通 过 flex-grow 属性 来 调整 子 元 素 的 宽度 ; 如 果子 元 素 的 width 
宽度 ， 就 必须 通过 flex-shrink 
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属性 值 之 和 大 于 容器 元 素 的 


属性 来 调整 子 元 素 的 宽度 ， 当 元 素 排列 方向 为 纵向 排列 时 ， 如 





就 必须 通过 flex-shrink 属性 


果子 元 素 的 height 属性 值 之 和 小 于 容器 元 素 的 高 度 , 就 必须 通过 flex-grow 属性 来 调整 子 元 素 
的 高 度 ， 如 果子 元 素 的 height 属性 值 之 和 大 于 容器 元 素 的 高 度 ， 
来 调整 子 元 素 的 高 度 。 





【 例 17-16】 使 用 flex-shrink 属性 指定 元 素 的 宽度 。 
<style type="text/css"> 
#container{ 
display: flex; 
width: 600px; 
height: 300px; 
border: solid 5px green; 
flex-direction: row; 


color:white; 
} 
#a-area { 
background-color: blue: 
} 
#b-area{ 
background-color: yellowgreen; 
flex-shrink: 3; 
} 
#c-area{ 
background-color: green; 
} 


#a-area,#b-area,#c-area { 
box-sizing: border-box; 
font-size: 1.5em; 
font-weight: bold; 


width: 250px; 
flex-shrink: 1; 
h 
</style> 


运行 以 上 代码 , 效果 如 图 17-23 Brass 本 例 指定 所 有 div 子 元 素 的 flex-shrink 属性 值 为 1, 


宽度 为 230px， 指 定 第 二 个 div 子 元 素 的 flex-shrink 属性 值 为 3。 





nk 


lex-shri 
€ > C 0127001 


A 区 域 














图 17-23 使 用 flex-shrink 


属性 指定 元 素 的 宽度 
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在 本 例 中 ， 当 使 用 fex-shrink 属性 计算 元 素 的 宽度 时 ， 计 算 步 又 如 下 
(1) 3 个 div 子 元 素 宽度 的 总 和 -容器 宽度 : 250x3-600=150px。 
(2) 3 个 div 子 元 素 宽度 的 flex-shrink 属性 值 总 和 : 150=5=30px。 





(3) 第 一 个 和 第 三 个 div 子 元 素 的 宽度 等 于 其 width 属性 值 -其 他 flex-shrink. 属性 值 : 


250-30x1-220px. 
(4) 第 二 个 div 子 元 素 的 宽度 等 于 其 width 属性 值 -其 flex-shrink 属性 值 : 





250-30x3=160px。 








在 使 用 flew-grow 或 flex-shrink 属性 调整 子 元 素 的 宽度 时 ， 也 可 以 使 





日 flex-basis 属性 指 





定 调整 前 子 元 素 的 宽度 ， 该 属性 和 width 属性 的 作用 相同 。 
可 以 将 flex-grow、flex-shrink 以 及 flex-basis 属性 值 合并 写 入 flex 属性 
flex:flex-grow 属性 值 ”flex-shrink 属性 值 flex-basis 属性 值 ; 


中 , 语法 格式 如 下 : 





以 上 3 个 属性 均 为 可 选 属性 ， 当 不 指定 flex-grow 和 flex-shrink 属性 时 ， 默 认为 Ipx; 当 


不 指定 flex-basis 属性 时 ， 默 认为 0。 
17.3.7 ”控制 换行 方向 


使 用 flex-wrap 属性 来 指定 单行 布局 或 多 行 布局 。 该 属性 的 取 值 有 nowrap( 不 换行 )、wrap 


(换行 ) 和 wrap-reverse 共 3 个。 
【 例 17-17】 flex-wrap 属性 的 使 用 。 


style type="text/css"> 
#container{ 
display: flex; 
width: 500px; 
height: 300px; 
border: solid 5px green; 
flex-direction: row; 
color:white; 
flex-wrap: wrap; 
) 
Za-area ( 
background-color: blue: 
) 
#b-area{ 
background-color: yellowgreen; 
3 
#c-area{ 
background-color: green; 
3 


*'a-area £b-area #c-area { 
box-sizing: border-box: 
font-size: 1.5em; 
font-weight: bold; 
width: 250px: 

H 
</style> 

运行 以 上 程序 ,效果 如 图 17-24 所 示 。 本 例 首先 将 容器 元 素 的 flex-wrap 





属性 设置 为 wrap， 
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宽度 为 500px， 所 有 div 子 元 素 的 宽度 为 250px。 





D flex-wrap 


€ > C |© 127.00.1:8020/ch17/17-17.html 


A 区 域 














图 17-24 ”允许 子 元 素 换行 显示 


其 他 属性 值 的 换行 效果 在 此 不 再 次 述 ， 感 兴趣 的 读者 可 以 将 flex-wrap 属性 改 成 相应 的 
值 ， 然 后 运行 代码 并 查看 换行 效果 。 


174 “弹性 念 布 局 的 布局 原理 


在 CSS3 中 ， 弹 性 盒 是 一 整套 布局 规范 ， 包 含 多 个 CSS 属性 ， 所 以 学 习 起 来 比较 复杂 。 
新 版 的 弹性 盒 规范 分 两 部 分 : 一 部 分 是 container， 另 一 部 分 是 items。 本 节 将 深入 讲解 弹性 盒 
布局 的 布局 原理 。 


17.4.1 弹性 盒 布 局 概述 


在 使 用 弹性 盒 布 局 时 , 经 常会 用 到 以 下 专业 术语 , 这 些 术语 的 图 形 化 表示 如 图 17-25 所 示 。 

e main-axis: 进行 布局 时 作为 布局 基准 的 轴 ， 在 横向 布局 时 为 水 平 轴 ， 在 纵向 布局 时 为 
垂直 轴 。 

e main-star/main-end: 进行 布局 时 的 起 点 和 终点 ， 在 横向 布局 时 为 容器 的 左 端 和 右 端 ， 
在 纵向 布局 时 为 容器 的 顶端 和 底 端 。 

e cross-axis: 与 main-axis 垂直 相交 的 轴 ， 在 横向 布局 时 为 垂直 轴 ， 在 纵向 布局 时 为 水 
平 轴 。 

e cross-start/cross-end: cross-axis 的 起 点 和 终点 ， 在 横向 布局 时 为 容器 的 顶端 和 底 端 ， 
在 纵向 布局 时 为 容器 的 左 端 和 右 端 。 


main-size 
, ? - -CIOSS-Start 








main-axis 


cross-size 
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图 17-25 ”弹性 盒 布局 的 原理 图 
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将 flex-wrap 属性 值 指定 为 wrap 且 进 行 横向 多 行 布局 时 ， 按 从 cross-start 到 cross-end 方 
向 ( 即 从 上 往 下 布局 )。 

将 flex-wrap 属性 值 指定 为 wrap-reverse 是 进行 横向 多 行 布局 时 ， 按 从 cross-end 到 
cross-start 方向 ( 即 从 下 往 上 布局 )。 

容器 中 有 主轴 和 纵 轴 的 概念 ， 默 认 主轴 (main-axis) 是 横向 ， 从 左 到 右 ; 纵 轴 是 竖 向 ， 从 
上 到 下 。 其 中 所 有 的 子 布局 都 会 受到 这 两 个 轴 的 影响 。 很 多 相关 的 CSS 属性 就 是 通过 改变 主 
轴 和 纵 轴 的 方向 来 实现 不 同 的 布局 效果 的 。 


17.4.2 justify-content 属性 














justify-content 





属性 指定 如 何 布局 容器 中 除了 子 元 素 之 外 的 main-axis 轴 ( 横 向 布局 时 ， 


main-axis 轴 为 水 平方 向 ， 纵 向 布局 时 main-axis 轴 为 垂直 方向 ) 方 向 上 的 剩余 空白 部 分 。 当 
flex-grow 属性 值 不 为 0 时， 各 子 元 素 在 main-axis 轴 方 向 自动 填 满 容器 ， 所 以 justify-content 属 


性 值 无 效 。 


justify-content 属性 的 取 值 有 以 下 几 个 : 

e flex-start: 从 main-start 开始 布局 所 有 子 元 素 (默认 值 )。 

e flex-start: 从 main-end 开始 布局 所 有 子 元 素 。 

e center: 居中 布局 所 有 子 元 素 。 

e space-between: 将 第 一 个 元 素 布 局 在 main-start 处 ， 将 最 后 一 个 元 素 布局 在 main-end 
处 ， 将 空白 部 分 平均 分 配 在 所 有 子 元 素 与 子 元 素 之 间 。 

e space-around: 将 空白 部 分 平均 分 配 在 以 下 几 处 , 比如 main-start 与 第 一 个 子 元 素 之 间 、 
各 子 元 素 与 子 元 素 之 间 、 最 后 一 个 子 元 素 与 main-end 之 间 。 

【 例 17-18】 justify-content 取 不 同属 性 值 的 效果 。 


<style> 

#container { 
display: flex; 
flex-direction: row; 
justify-content: flex-start; 
border: solid 5px blue; 
width: 600px; 
height: 50px; 
color: white; 

3 

#a-area ( 
background-color: blue; 
width: 100px: 

3 

#b-area ( 
background-color: yellow: 
width: 150px: 

H 

#c-area { 
background-color: green; 
width: 200px; 
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</style> 
运行 以 上 程序 ， 效 果 如 图 17-26 所 示 。 
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图 17-26 justify-content 取 不 同属 性 值 的 效果 
17.4.3 align-items 属性 





align-items 属性 指定 如 何 布局 容器 中 除了 子 元 素 之 外 的 cross-axis 轴 方向 上 的 剩余 


Wy 


空白 部 


分 。 横 向 布局 时 ，cross-axis 轴 方 向 为 水 平方 向 ， 纵 向 布局 时 ，cross-axis 轴 方 向 为 垂直 方向 。 


align-items 属性 的 取 值 如 下 : 

e flex-start: 默认 值 ， 从 cross-start 开始 布局 所 有 子 元 素 。 
e flex-start: 从 cross-end 开始 布局 所 有 子 元 素 。 

e center: 居中 布局 所 有 子 元 素 。 
. 


space-between: 如 果子 元 素 的 布局 方向 与 容器 的 布局 方向 不 一 致 ， 该 值 的 作用 等 效 于 
flex-start 属性 值 的 作用 ; 如 果子 元 素 的 布局 方向 与 容器 的 布局 方向 保持 一 致 ， 那么 所 


有 子 元 素 的 内 容 沿 基线 对 齐 。 


e space-around: 同一 行 中 所 有 子 元 素 的 高 度 被 调整 为 最 大 。 如 果 未 指定 任何 子 元 素 的 


高 度 ， 那 么 所 有 子 元 素 的 高 度 被 调整 为 最 接近 容器 的 高 度 。 
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Web 页 面 布局 是 指 对 页 面 中 的 标题 、 导 航 栏 、 主 要 内 容 、 脚 注 、 表 单 等 各 种 构成 元 素 进 
行 合理 排版 。 为 了 克服 CSS2 在 页 面 布局 方面 的 缺陷 ，CSS3 引入 了 更 灵活 的 布局 功能 ， 例 如 


多 栏 布局 、 盒 子 布局 以 及 弹性 盒 布 局 。 通 过 本 章 的 学 习 ， 读 者 应 能 掌握 CSS3 多 栏 布 





局 功能 


的 使 用 方法 ， 了 解 多 栏 布局 的 使 用 场合 ， 掌 握 CSS3 盒 布 局 功能 的 使 用 方法 ， 了 解 盒 布局 的 
使 用 场合 ， 以 及 盒 布 局 和 多 栏 布 局 的 区 别 ; 掌握 CSS3 中 弹性 盒 布局 的 基本 概念 以 及 使 用 方 


法 ， 了 解 弹性 盒 布局 的 布局 原理 。 
17.6 思考 和 练习 


. 在 CSS3 中 ， 通 过 哪个 属性 来 实现 多 栏 布局 ? 请 举例 说 明 如 何 实现 。 

. 在 CSS3 中 ， 通 过 哪个 属性 来 实现 盒 布局 ? 请 举例 说 明 如 何 实现 。 

. 在 CSS3 中 ， 通 过 哪个 属性 来 实现 弹性 盒 布 局 ? 请 举例 说 明 如 何 实现 。 
请 简单 描述 盒 布局 的 实现 原理 。 

. 多 栏 布 局 和 盒 布 局 有 什么 区 别 ? 








v oe WWNe 
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前 面 的 章节 系统 地 介绍 了 HTML5 和 CSS3 中 的 主要 知识 点 ， 对 于 核心 的 知识 点 ， 提 供 
了 相应 的 示例 。 但 是 ， 许 多 读者 发 现 ， 哪 怕 是 将 HTML5 和 CSS3 中 的 每 个 知识 点 都 看 过 一 
遍 并 项 过 一 人 遍 代码 ， 所 有 知识 点 都 熟 记 于 心 ， 到 了 实际 项 目 开 发 中 ， 仍 然 有 不 知 从 何 下 手 的 
感觉 。 事 实 上 ， 很 多 大 学 毕业 生 在 从 学 校 毕业 跨 入 社会 求职 时 ， 都 会 感到 这 样 的 焦虑 一 一 好 
像 自己 学 了 很 多 知识 ， 发 现 对 实际 工作 没什么 用 ， 或 者 不 知道 怎么 下 手 应 用 所 学 的 技术 去 做 
实际 项 目 。 

因此 ， 本 章 将 结合 实际 的 项 目 开发 流程 ， 根 据 实 际 的 业务 需求 ， 讲 解 如 何 使 用 HTMLS 
和 CSS3 来 开发 实际 的 项 目 或 产品 。 

本 章 学 习 目标 : 
前 端 应 用 的 开发 现状 与 趋势 
Web 应 用 开发 流程 
如 何 进行 需求 分 析 
如 何 将 需求 转换 为 产品 框架 
如 何 为 项 目 建立 数据 库 
跨 平台 接口 规划 
开发 及 实施 部 署 事 项 


18.1 “前 端 应 用 开发 的 现状 与 趋势 


随 着 互联 网 日 新 月 异 ， 大 众 消 费 意 识 也 在 不 断 发 生变 化 ， 日 常生 活 中 方方面面 都 会 用 到 
APP， 比 如 购物 、 学 习 、 影 音 等 类 别 的 APP， 应 有 尽 有 。 正 因 如 此 ，Web 前 端 工程 师 这 一 职 
业 一 直 很 火 。Web 前 端 主要 涉及 PC 网 站 的 前 端 、 手 机 等 移动 设备 网 站 的 前 端 和 ApPP 客户 端 
的 前 端 (也 就 是 手机 原生 APP 和 HIMLS 的 混合 ， 即 Hybrid 编程 )， 本 节 主 要 简单 介绍 前 端 应 
开发 的 发 展现 状 和 趋势 。 

目前 Web 前 端 开 发 正 处 于 发 展 的 高 峰 期 ， 各 大 公司 、 企 业 为 了 加 强 产 品 的 用 户 体验 ， 吸 
引用 户 ， 都 建立 了 属于 自己 的 用 户 体验 团队 ， 使 得 HTMLS 技术 得 到 广泛 应 用 。 


18.1.1 HTML5 应 用 现状 


从 软件 角度 来 看 ， 桌 面 浏览 器 对 HIMLS 的 支持 高 于 移动 浏览 器 ， 最 高 可 达 95%。 但 从 
整体 上 而 言 ， 移 动 浏览 器 对 HIMLS 的 支持 却 优 于 桌面 浏览 器 ， 手 机 浏览 器 几乎 完全 支持 
HTML5、CSS3 的 新 增 功能 。 

HTMLS 具有 较 好 的 浏览 器 向 后 兼容 性 ， 开 发 者 能 对 浏览 器 不 支持 的 情形 设计 各 种 各 样 
的 回 退 方案 。 因 此 ，HTMLS5 页 面 的 实际 显示 性 能 与 开发 者 、 制 作 平 台 密 切 相 关 。 在 商业 需 
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求 的 驱动 下 ，HIMLS 页 面 设计 的 目的 性 更 强 ， 获 得 最 好 传播 效果 的 基本 上 是 经 过 一 定时 间 
的 策划 ， 在 团队 操作 下 有 针对 性 进行 投放 的 企业 案例 。 


18.1.2 HTML5 行业 发 展 趋势 


伴随 HTMLS5 兴起 的 是 Flash 的 没落 , HTMLS 除了 提供 移动 设备 的 跨 平台 性 和 较 好 的 媒 
体 支持 外 ， 应 用 范围 也 广 于 HTML4。 近 几 年 来 ，HTMLS5 在 以 下 四 大 方面 突破 巨大 : 

e 往 重 度 内 容 化 方向 发 展 ， 在 用 户 对 页 面 交 互 能 力 和 HTMLS 拓展 功能 的 要 求 提 高 之 
际 ， 轻 度 营销 的 市 场 份额 会 逐渐 降低 ， 往 重度 营销 内 容 转换 。 

o 往 网 页 游戏 方向 发 展 : 网 页 游戏 更 可 能 结合 HTMLS 优良 的 通信 功能 ， 往 跨 屏 互动 等 
交互 特征 更 明显 的 形式 发 展 。 

o 往 虚拟 现实 、 人 工 智能 方向 发 展 :无论 是 虚拟 现实 还 是 人 工 智能 ， 都 少不了 呈现 端 

的 制作 以 及 数据 的 交互 ， HIMLS 在 用 户 体验 方面 的 支持 和 增强 的 通信 和 能力， 使 虚 
拟 现实 和 人 工 智能 等 新 兴 行 业 呈 现 到 Web 页 面 上 ， 以 及 投放 到 各 种 客户 端 设备 成 为 
可 能 。 

o 往 在 线 应 用 方向 发 展 :密切 相关 的 垂直 行业 包括 在 线 教育 、 电 商 和 流 媒体 3 种 类 型 。 

e 往 内 容 直 接 填充 方向 发 展 : 在 HTMLS 模板 的 帮助 下 , 新 媒体 内 容 能 够 通过 应 用 母 版 

进行 编辑 ， 用 户 只 需要 在 后 期 进行 图 文 内 容 的 替换 ， 因 此 这 也 很 可 能 成 为 传媒 业 转 
型 的 契机 。 

从 以 上 几 点 内 容 来 看 ，HIML5 有 很 大 的 市 场 ， 并 且 呈 继续 发 展 和 完善 的 态势 。 例 如 ， 
移动 Web 开发 的 发 展现 状 及 趋势 非常 不 错 ， 许 多 公司 利用 HTMLS 技术 直接 做 手机 端 应 用 ， 
无 须 再 为 Android 和 iPhone 端 应 用 单独 配置 一 套 开发 人 员 ， 大 大 节省 了 人 力 成 本 。 因 此 ， 从 
事 Web 前 端 开发 就 业 前 景 极 好 。 


18.2 ”网 站 开发 流程 


随 着 这 几 年 传统 行业 越发 不 景气 ， 越 来 越 多 企业 开始 尝试 网 络 营销 策略 。 这 种 时 候 ， 建 
设 优秀 的 网 站 来 宣传 ， 甚 至 在 网 站 上 与 客户 成 交 是 必 不 可 少 的 。 本 节 就 来 简单 介绍 网 站 的 开 
发 流程 。 
18.2.1 确定 建站 目标 


网 站 建设 流程 的 第 一 步 ， 是 为 网 站 设立 一 个 目标 ， 这 个 目标 不 能 是 抽象 化 的 、 简 单 的 。 
比如 : 我 想 做 一 个 很 漂亮 的 网 站 ， 我 想 做 一 个 功能 很 强大 的 网 站 ， 类 似 这 种 描述 太 过 抽象 和 
简单 ， 因 而 无 法 准确 确定 网 站 的 目标 。 做 网 站 之 前 ， 要 先 问 问 ， 为 什么 要 做 网 站 ? 网 站 是 否 
有 移动 端 ? 网 站 的 目标 用 户 群 是 哪些 ? 用 什么 办 法 吸引 哪些 人 访问 网 站 ? 虽说 不 能 指望 所 有 
访问 者 都 会 喜欢 这 个 网 站 ， 但 对 网 站 的 目标 描述 得 越 清楚 、 越 详细 ， 网 站 访问 量 就 会 越 大 ， 
网 站 建设 就 越 有 可 能 成 功 。 在 建设 任何 网 站 之 前 ， 这 是 值得 仔细 认真 考虑 的 问题 。 


18.22 ”进行 需求 分 析 
确定 好 建站 目标 后 ， 接 着 需要 进行 需求 分 析 。 那 么 ， 分 析 的 内 容 包括 什么 ? 比如 ， 客 户 
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想 要 一 个 什么 类 型 的 网 站 ， 以 及 这 个 网 站 的 风格 是 什么 样 的 ， 确 定 网 站 域名 和 空间 ， 等 等 。 
需求 可 能 来 自 客 户 (外 包 软 件 )， 也 可 能 来 自用 户 ( 自 有 产品 )。 其 中 ， 客 户 /用 户 根 据 不 同 
类 型 又 可 细 分 为 个 人 用 户 、 企 业 用 户 等 。 
需求 分 析 主 要 解决 做 什么 的 问题 ， 相 应 的 负责 人 有 项 目 经 理 、 产 品 经 理 ， 甚 至 需要 更 高 
一 级 的 战略 规划 。 


18.2.3 ”绘制 网 站 原型 


根据 网 站 需求 分 析 提 炼 出 来 的 功能 点 ， 产 品 经 理 根据 需求 分 析 ， 使 用 Axure 等 原型 绘制 
工具 规划 出 网 站 的 内 容 板块 草图 及 交互 效果 。 在 这 一 过 程 中 ， 产 品 经 理 有 可 能 需要 根据 网 站 
推广 需求 ， 根 据 搜索 引擎 的 抓 取 习惯 来 布置 网 站 板块 。 


18.24 ”系统 整理 所 需 资料 


需求 分 析 过 后 ， 除 了 绘制 网 站 原型 之 外 ， 还 有 一 项 重要 的 工作 就 是 收集 整理 建设 网 站 所 
需 的 资料 。 网 站 的 前 期 工作 需要 围绕 网 站 目标 来 进行 。 例 如 网 站 的 架构 、 网 站 的 功能 、 网 站 
所 需 的 图 片 、 文 字 、 动 画 、 视 频 等 资料 。 分 类 整理 、 仔 细 检 查 ， 确 保 建站 的 原始 资料 正确 。 
一 般 这 件 事情 主要 由 项 目 经 理 指派 资料 专员 去 收集 。 


18.25 与 网 站 设计 美工 确定 布局 和 风格 


将 网 站 原型 给 设计 人 员 ， 由 设计 人 员 制 作 网 站 效果 图 。 就 好 比 建 房子 一 样 ， 首 先 夯 出 效 
果 图 ， 然 后 开始 建 房子 ， 网 站 也 是 如 此 。 

设计 人 员 在 根据 原型 图 设计 网 站 效果 图 时 ， 还 需要 确定 网 站 的 布局 、 风 格 等 内 容 。 这 需 
要 设计 人 员 进行 综 合 考虑 ， 例 如 网 站 所 在 行业 的 特色 、 网 站 目标 人 群 的 特点 、 建 站 技术 人 员 
的 经 验 、 视 觉 美 工 的 经 验 等 方面 。 


18.26 ”程序 员 完成 网 站 功能 实现 


根据 设计 人 员 制 作 好 的 网 站 效果 图 ， 前 端 和 后 台 可 以 同时 进行 开发 。 

o 前 端 : 根据 设计 人 员 提 供 的 网 站 效果 图 制作 静态 页 面 , 包括 HTML 页 面 和 CSS 样式 。 

€ 后 台 : 根据 页 面 结构 和 效果 图 ， 设 计数 据 库 ， 并 开发 网 站 后 台 。 这 部 分 工作 主要 
后 端 程序 员 实现 。 后 端 程序 员 需 要 根据 客户 提出 的 网 站 性 能 需求 ， 考 虑 多 方 因 素 ， 
例如 速度 、 安 全 、 负 载 能 力 、 运 营 成 本 ， 进 而 选择 合适 的 网 站 编程 语言 和 数据 库 。 
另外 ， 如 果 网 站 需要 提供 手机 版 网 站 ， 页 面 还 需要 进行 响应 式 设 计 ， 或 者 单独 制作 
手机 版 网 站 。 


18.2.7 ”网 站 上 线 测试 


在 本 地 搭建 服务 器 ， 测 试 网 站 有 没有 什么 bug。 若 无 问题 ， 可 以 使 用 FTP 客户 端 工具 将 
网 站 文件 上 传 至 服务 器 ， 然 后 由 各 方 人 员 测试 网 站 ， 其 中 包括 建站 技术 人 员 、 网 站 需求 方 、 
网 站 客户 方 等 。 发 现 问题 并 记录 问题 ， 直 至 网 站 各 方面 的 细节 都 已 经 完善 。 
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18.2.8 网 站 推广 


为 了 让 潜在 客户 找到 网 站 ， 必 须 在 网 页 搜索 引擎 中 加 入 自己 公司 的 名 称 或 关键 词 。 如 果 
是 一 个 新 的 网 站 ， 搜 索引 擎 要 找到 这 个 网 站 可 能 需要 一 段 时 间 。 这 时 候 就 需要 专业 的 网 络 推 
广 团队 为 网 站 做 优化 推广 。 当 然 ， 后 续 还 要 进行 网 站 维护 工作 ， 包 括 网 站 开发 完成 后 经 测试 
出 现 的 程序 bug 和 页 面 问题 ， 修 改 文字 、 修 改 图 片 、 修 改 LOGO、 修 改 后 台 管 理 账号 、 修 改 
文本 颜色 、 修 改 BANNER 等 。 

介绍 完 网 站 开发 流程 之 后 ， 下 面 通 过 两 个 综合 实例 来 帮助 读者 更 好 地 理解 全 书 内 容 ， 帮 
助 读者 从 总 体 上 掌握 应 该 如 何 综合 运用 HTMLS 和 CSS3 技术 来 创建 具有 现代 风格 的 Web 网 
站 和 Web 应 用 程序 。 





18.3 ”企业 网 站 


HTMLS 中 新 增 了 儿 个 结构 元 素 : section. article, nav. aside, header 和 footer。 通 过 运 
这 些 结构 元 素 ， 可 以 更 方便 地 对 网 页 进行 布局 ， 使 得 网 页 整体 结构 更 加 直观 、 明 确 ， 更 为 
语义 化 。 

本 节 将 以 一 个 企业 网 站 为 例 ， 介 绍 如 何 综合 运用 HTMLS 中 的 这 些 结构 元 素 ， 还 将 介绍 
页 面 中 每 个 结构 元 素 起 到 的 作用 ， 以 及 应 该 展现 哪些 内 容 等 。 这 里 会 将 实现 页 面 的 HIMLS 
代码 与 CSS3 样式 代码 一 起 进行 介绍 ， 以 便 读 者 同时 了 解 在 用 HTMLS 实现 的 网 页 中 应 该 如 
何 使 用 CSS3 样式 来 对 页 面 中 的 元 素 进行 页 面 布 局 以 及 视觉 美化 。 


18.3.1 组 织 网 页 结构 


在 用 HIMLS 实现 的 网 站 中 ， 每 一 个 网 页 都 将 由 一 些 主体 结构 元 素 构成 。 在 标准 的 网 页 

布局 中 ， 一 个 网 页 通常 由 以 下 几 个 结构 元 素 构成 : 

* header 结构 元 素 : 通常 用 来 展示 网 站 的 标题 、 企 业 或 公司 LOGO、 广 告 、 网 站 导航 
条 等 。 

e aside 结构 元 素 : 通常 用 来 展示 与 当前 网 页 或 这 个 网 站 相关 的 一 些 辅助 信息 。 例 如 ， 
在 博客 网 站 中 ， 可 以 用 来 显示 博 主 的 文章 列表 和 浏览 者 的 评论 信息 等 ; 在 购物 网 站 
中 ， 可 以 用 来 显示 商品 清单 、 用 户 信息 、 用 户 购买 记录 历史 等 ; 在 企业 网 站 中 ， 可 
以 用 来 显示 产品 信息 、 企 业 联系 方式 、 友 情 链接 等 。aside 结构 元 素 可 以 有 多 种 形式 ， 
其 中 最 常见 的 形式 是 侧 边栏 。 

e section 结构 元 素 : 网 站 中 要 显示 的 主体 内 容 通常 被 放置 在 section 结构 元 素 中 ， 每 个 
section 结构 元 素 都 应 该 有 一 个 标题 来 显示 当前 要 展示 的 主要 内 容 的 标题 信息 。 每 个 
section 结构 元 素 中 通常 还 应 该 包括 一 个 或 多 个 section 元 素 或 article 元 素 ， 用 来 显示 
网 页 主体 内 容 中 每 个 相对 独立 的 部 分 。 

e footer 结构 元 素 : 通常 ， 每 个 网 页 中 都 具有 footer 结构 元 素 ， 用 来 放置 网 站 的 版 权 
声明 和 备案 信息 等 与 法 律 相 关 的 信息 ， 也 可 以 放置 企业 的 联系 电话 和 传真 等 联系 
信息 。 

本 节 要 建立 的 企业 网 站 的 首页 在 浏览 器 中 的 效果 如 图 18-1 所 示 。 
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图 18-1 企业 网 站 首页 的 显示 效果 














首页 主要 分 为 四 个 部 分 : 第 一 部 分 为 网 页 标题 部 分 ， 主 要 显示 该 企业 网 站 的 网 站 标题 、 
网 站 导航 链接 ， 第 二 部 分 为 网 页 侧 边栏 ， 主 要 显示 该 企业 的 产品 分 类 和 联系 方式 ， 第 三 部 分 
为 在 该 企业 网 站 的 首页 上 要 展示 的 主要 内 容 ， 第 四 部 分 为 页 面 底部 的 企业 版 权 信 息 和 联系 方 
式 等 。 

由 此 可 得 出 该 企业 网 站 首页 的 整体 结构 ， 如 图 18-2 所 示 。 





图 18-2 企业 网 站 首页 的 整体 结构 


首页 上 有 几 个 主要 的 HTMLS 结构 元 素 ， 主 要 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
</head> 


<body> 
<footer id="container"> 


«div id="content"> 
«article 
<div id="imgPlay"></div> 
<div class="n_content"></div> 
</article> 
<aside> 
</aside> 
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</div> 
<footer> 
</footer> 
</div> 
</body> 
<html> 








在 页 面 开头 使 用 HIML5 中 的 <IDOCTYPE html> 语 句 来 声明 页 面 将 使 用 HTML5 语言 来 
构建 。 在 <head> 标 签 中 ， 除 了 在 <meta> 标 签 中 使 用 更 简洁 的 编码 指定 方式 之 外 ， 其 他 代码 均 
5j HTMIA 的 <head> 标 签 中 的 代码 完全 一 致 。 页 面 中 使 用 了 很 多 结构 元 素 , 用 来 代替 HTMLA 
中 的 div 元 素 ， 因 为 div 元 素 没 有 任何 语义 ， 而 HTMLS 推荐 使 用 具有 语义 的 结构 元 素 ， 这 样 
做 的 好 处 是 ， 可 以 让 整个 网 页 结构 更 加 清晰 ， 浏 览 器 、 屏 幕 阅读 器 以 及 其 他 阅读 代码 的 人 也 
可 以 直接 从 这 些 结构 元 素 分 析出 网 页 中 在 什么 部 位 放置 了 什么 内 容 。 








18.3.2 ”构建 网 页 标题 


首先 来 看 企业 网 站 首页 的 网 页 标题 部 分 。 该 部 分 在 浏览 器 中 的 显示 效果 如 图 18-3 所 示 。 


首页 关于 我 们 解决 方案 我 们 的 服务 联系 我 们 





该 部 分 被 放置 在 一 个 header 元 素 9 


图 18-3 ”示例 页 面 中 header 元 素 的 效果 





P。 在 企业 网 站 中 ， 通 常 将 企业 名 称 、 企 业 LOGO、 整 


个 网 站 的 导航 链接 以 及 一 些 广告 图 片 、 广 告 Flash 等 放置 在 header 元 素 中 , 作为 网 页 标题 部 分 。 
示例 页 面 中 header 元 素 的 结构 如 图 18-4 所 示 。 





nav ( 显示 网 站 链接 ) 





该 部 分 的 结构 代码 如 下 : 
<header> 
<div id="logo"> 
</div> 


图 18-4 ”网 页 标题 部 分 的 结构 图 
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«nav 
[header 


在 该 企业 网 站 的 首页 中 ， 由 于 使 用 图 片 来 显示 企业 名 称 ， 因 此 通过 将 图 片 放 在 hl 元 素 
中 ， 并 将 图 片 元 素 img 的 alt 属性 设置 为 企业 名 称 的 1. 中 视 典 数字 科技 














办 法 ， 在 大 纲 中 将 企业 名 称 作为 整个 网 页 的 标题 。 1. Untitled Section 
这 段 结构 代码 生成 的 大 纲 如 图 18-5 所 示 。 图 18-5 ”网 页 标题 部 分 生成 的 大 纲 























由 于 在 header 元 素 中 使 用 一 个 nav 元 素来 显示 网 

站 的 导航 链接 ， 并 且 没有 给 这 个 nav 元 素 添加 标题 ， 因 此 生成 “1. Untitled Section” 一 节 。 
网 页 标题 部 分 的 完整 代码 如 下 : 

<!DOCTYPE html> 

<html xmins-"http://www.w3.org/1999/xhtml" 











<head> 

<meta charset="utf-8" /> 

<title> 虚 拟 现实 IWeb3DIVRIVRPIAR 增强 现实 技术 </title> 

<meta name-"keywords" content=" 虚 拟 现实 ,VR 虚拟 现实 ,虚拟 现实 技术 ,vr,vrp, 增 强 现实 ,增强 
现实 技术 ,VR 技术 ,AR BUR" /> 

«meta name="description" content=" 国 内 第 一 个 虚拟 现实 平台 软件 VRPlatform, 虚拟 现实 软 硬 件 
定制 ， 虚 所 现实 教学 系统 ， 虚 拟 现实 展览 展示 产品 ， 虚 所 现实 网 络 三 维 技术 ,装饰 设计 和 数字 营销 系统 。" 户 

link hre£-"css/default.css" rel-"stylesheet" type-"text/css" /» 


</head> 
<body> 
«div id="container"> 
<header> 
<div id="logo"> 
<h1><a href="#"><img src-"images/logo png" alt=" 中 视 典 数字 科技 "/></a></h1> 
</div> 
<nav> 
<ul id="topNavUr]"> 
<li class="first"> 
<a href="#" accesskey="1" title="">} j1 </a> 
><I> 
<a href="#" accesskey="2" title="> 关 于 我 们 </a> 
«fi^ 
<a href="#" accesskey="3"title= > 解决 方案 </a> 
«lili 
<a href="#" accesskey-"4" title="> 我 们 的 服务 </a> 
><I> 
<a href="#" accesskey-"5" title="> 联 系 我 们 </a> 
«Ih 
«hb 
«nav» 
</header> 





在 这 段 代码 中 , 在 nav 元 素 内 部 使 用 也 列表 来 显示 网 站 导航 链接 , 为 了 避免 在 列表 元 
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素 的 背景 中 使 用 的 图 片 与 图 片 之 间 有 和 裂痕， 必须 将 前 一 个 列表 元 素 的 结束 标记 </li> 与 后 一 
个 下 列表 元 素 的 开始 标记 <j> 写 在 同一 行 中 ， 书 写成 <li> </l 记 的 形式 。 另 外 ， 在 样式 代码 中 ， 
需要 使 用 如 下 代码 ， 使 得 列表 元 素 的 项 目 编号 不 显示 ， 并 且 并 排 显示 : 
ulitopNavUrl li{ 
list-style: none; 
display: inline-block; 
j 
18.3.8. ”构建 人 出 边栏 


接 下 来 介绍 企业 网 站 首页 的 侧 边栏 部 分 ， 该 部 分 被 放置 在 一 个 aside 元 素 中 。 

在 HTMLS 中 ， 使 用 aside 元 素来 显示 当前 网 页 主体 内 容 之 外 的 、 与 当前 网 页 显示 内 容 
相关 的 一 些 辅助 信息 。 例 如 ， 可 以 将 网 站 经 营 者 或 管理 者 认为 比较 重要 的 、 想 让 浏览 者 经 常 
能 看 见 的 一 些 内 容 显示 在 aside 元 素 中 。aside 元 素 的 显示 形式 可 以 多 种 多 样 ， 其 中 最 常用 的 

在 示例 页 面 中 ，aside 元 素 的 内 容 在 浏览 器 中 的 显示 效果 如 图 18-6 所 示 。aside 元 素 的 内 
部 结构 如 图 18-7 所 示 。 





















































aside 
h3 
A ul 
m h3 
address 
图 18-6 aside 元 素 的 显示 效果 图 18-7” 侧 边栏 部 分 的 结构 图 
侧 边 栏 分 为 两 部 分 ， 第 一 部 分 用 来 显示 标题 “解决 方案 ”和 所 有 解决 方案 列表 ; 第 二 部 


分 为 企业 的 联系 信息 。 由 于 使 用 也 列表 元 素 直 接 显示 企业 的 联系 信息 ， 因 此 在 结构 中 没有 体 
现 出 第 二 部 分 。 
该 aside 元 素 在 HTML 页 面 中 的 代码 结构 如 下 : 
<aside> 
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</div> 
</aside> 
aside 元 素 及 内 部 显示 的 “解决 方案 ”链接 组 和 “联系 我 6. 解决 方案 
们 ”如 图 18-8 所 示 。 7. 联系 我 们 
侧 边栏 的 完整 程序 如 下 : 图 18-8 aside 元 素 生 成 的 大 网 
<aside> 
<div id="secondaryContent"> 
<h3> 解 决 方案 <h3> 
<ul> 
<li><a href="#"> A EUH 3£/27— [lili 
<a hre 伍 "#'> 文 物 馆藏 Ja></li><li> 
<a hre 伍 "#' > 数字 城 市 <a><lli> <li> 
<a hre 伍 "#'> 场 馆 仿 真 <a></li><li> 
<a hre 伍 "#'> 地 产 漫游 <a></li><li> 
<a href="# 人 > 室内 设计 </a></li><li> 
<a href="#"> HC gla lii 
<a hre 全 "人 > 文物 古迹 </a></li><li> 
<a href£-"£ > 工业 仿真 <Ja></li><li> 
<a hre 人 ="#> 汽 车 仿真 <Ja></li><li> 
«ful 
<h3> 联 系 我 们 </h3> 
<address> 地 址 : 北京 市 朝阳 区 酒仙 桥 北 路 甲 * 号 院 201 号 楼 D 座 2 层 206( 电 <br/> 
邮编 : 100015<br/> 
热线 电话 : 400-668-1235-br/- 
传真 : 010-57910601<br/> 
网 址 : www.vmp3d.com</address> 
«div class="xbg"></div> 
</div> 
</aside> 
以 上 程序 与 header 元 素 中 的 nav 元 素 相同 ， 使 用 也 列表 元 素 显示 一 组 超 链接 ， 并 在 世 列 
表 元 素 的 上 下 两 边 放 置 装饰 图 片 。 另 外 ， 使 用 address 元 素来 显示 企业 的 联系 信息 。 在 HTMLS 
中 ，address 元 素 是 一 种 专门 用 来 显示 联系 信息 的 元 素 ， 可 以 用 来 显示 网 站 链接 、 电 子 邮箱 、 
真实 地 址 、 电 话 号 码 等 各 类 联系 信息 。 
与 侧 边栏 相关 的 样式 代码 如 下 : 
#secondaryContent 
{ 
position: relative; 
float: left; 
width: 14em; 
padding: 3em 2em 1.5em 2em; 
background: fff url('images/al.gif") top right repeat-y; 
j 


18.3.4 构建 主体 内 容 
接 下 来 介绍 首页 的 主体 内 容 。 该 部 分 的 显示 效果 如 图 18-9 所 示 。 


333° 





全 息 教 室 HoloCl 


“海量 内 容 ! 高 性 "MT 
HATRINA DAC: 





ILSA -a AR 增强 现实 
E 
图 18-9 首页 的 主体 内 容 部 分 





该 部 分 被 放置 在 一 个 article 元 素 中 ， 这 个 article 元 素 的 结构 图 如 图 18-10 所 示 。 


轮 播 图 



































图 片 图 片 
图 片 图 片 














图 18-10 主体 元 素 的 结构 图 


这 个 article 元 素 的 内 部 结构 代码 如 下 : 


<article> 
«div id="primaryContentContainer"> 
<div id="primaryContent"> 
<div id="imgPlay"> 
<div class="n_content"> 
«div class="n_vr"></div> 
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«div class="n_vr"></div> 
«div class="n_vr"></div> 
«div class="n_vr"></div> 
«div class-"n vr"></div> 
«div class="n_vr"></div> 
«div class-"n vr'7—/div- 
<div class-"n vr'7—/div- 
</article> 
由 这 段 代码 生成 的 大 纲 如 图 18-11 所 示 。 
在 这 个 article 元 素 的 内 部 , 由 于 没有 使 用 header 元 素 , 也 1. Untitled Section 
没有 放置 标题 元 素 hl~h6， 并 且 没有 提供 标题 文字 ， 因 此 在 大 2. Untitled Section 
纲 中 分 别 生成 标题 为 “1. Untitled Section”, “2. Untitled Section” FOSU 首页 主体 部 分 的 大 网 




















的 两 个 未 知 节 。 
这 个 article 元 素 的 程序 代码 如 下 : 
<article> 
«div id="primaryContentContainer"> 
<div id="primaryContent"> 
<!- 轮 播 开 始 -> 
<script type-"text/javascript"------ </script> 
<div id="imgPlay"> 
<ul style="position: relative; " class="imgs ul-img"> 
<li> 
<a href="#" target="_blank"><img pg" al 全 "全息 教室 " /></a> 
<Ni><li> 


<a href="#" target="_blank" rel="nofollow" ><img src="images/VRPhome.jpg" 
alf=" 地 产 家 居 " 广 </a> 
<Ni><i> 
<a href="#" target="_blank"><img nner jpg" alt=" 全 息 教室 发 布 会 " /> </a> 
<Ni><li> 
<a href-"" target="_blank"><img 1 jpg" alt=" 全 息 台 " /> </a> 
«i-i 
<a href="#" target-" blank"-—img jpg" alt="AR 台 " /></a> 
«i-i 
<a href="#" target-" blank"><img alt=" 中 视 典 在 京 发 布 国内 首 款 开放 式 虚 
拟 现实 软件 OpenVRP" /></a> 
</li><li><img src="images/v_banner6.jpg" alt=" 智 游 天 下 tore 下 载 " 
border="0" usemap="#Map" /> 
<a href="#" target="_blank"> «map name="Map" id="Map"> 
<area shape="rect" coords="172,256,309,296"  href-"https://itunes.apple.com/cn/app/zong-lu-wan-san-wei- 
dao-lan/id766388808?l=en&amp;mt=8" target="_blank" /> 
<area shape="rect" coords="645,256,782,296" href="https://itunes.apple.com/cn/app/gui-zhou-lu-you3d 
-dao-lan1.0/1d756529894?I-en&amp:mt-8" target="_blank" /> </map> </a> 
«nli 
<a href="#" target-" blank"><img spg" alt-"VRP12.0 共享 版 下 载 " 广 <a> 
</Ni><li><img src-"images/v banner3 jpg" alt=" 极 光 具有 实时 演 染 引擎 " 广 
</li><li><img src-"images/v banner4 jpg" alt~" 互 动 之 旅 " 
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<a href="#" target-" _blank"><img spg" alt=" 虚 拟 仿 真实 验 室 教学 平台 " /></a> 
</li><li><img src-"images/v banner0 jpg" alt=" HE ii HEERA" /> 
«fi 
<l> 
<div class="num">&nbsp;</div> 
<div class="num" id="numInner">&nbsp;</div> 
<div class="prev"> 上 一 张 </div> 
<div class="next"> 下 一 张 </div> 
</div> 
Ie 
<div class="n_content"> 
<div class="n_ vr"> 
«div class-"n vr tp"> 
<a href="#" rel= “nofollow” ><img sx.png" alt=" 典 居 " /></a> 


</div> 
<div class="n_vr_wz"> 
<ul> 
<i> 
<a href="#"> PERIKA E E He LUST 
«—li^ 
<a hre 伍 "#"> 从 买房 到 装修 ， 虚 拟 现实 让 租房 族 
«fili 
<a href="#"> JOE BOR TEM T NV IT ISTRHI 
«fili 
<a href="#"> Hh (TV LN HeULBILSI Br Re 
«hi 
<l> 
</div> 


<div class="n_vr_more"> 
<a href="#">&gt;&gt; 更 多 </a> 
</div> 
</div> 
«div class="n_vr"> 
<div class="n_vr_tp"> 
<a href="#"><img src-"images/ly bannerl jpg" alt=" 
</div> 
<div class="n_vr_wz"> 
<ul> 
<l> 
<a hre 伍 "#'>“ 中 视 典 杯 ” 苏 皖 高 校 作品 展 
«lili 
<a href="#"> rp tek "VR 优秀 品牌 奖 ” 
«lili 
<a href-"- VR 技术 教学 资源 建设 与 应 用 高 级 
«fili 
<ahre 全 "六 >【 双 创新 引擎 】 首 个 全 息 商 学 院 
< 由 > 
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ul 
</div> 
«div class-"n vr more" 
-ahref-"?"-&gt&gt 更 多 </a> 
</div> 
</div> 
«div class="n_vr"> 
<div class-"n vr tp" 
<a href="#"><img src-"images/ie bannerl.jpg" a 


</div> 
<div class="n_vr_wz"> 
<ul> 
<li> 
<a href "H" >H RG” ME) 
«li^ 
<a href="#"> HILI VRP 助力 世博 [视频 ] 
«fili 
<a href="#"> FHER TS 中 国 东盟 网 
«nili 
<a href="#">3D 互联 网 前 景 无 限 </a> 
«nh 
<l> 
</div> 


<div class="n_vr_more"> 
-ahref-"?"-&gt&gt; 更 多 </a> 
</div> 
</div> 
<div class-"n vrl" 
«div class-"n vr tp" 
<a href="#"><img src-"images/sz bannerl jpg" alt=" 


</div> 
<div class-"n Vr_wz"> 
<ul> 
<li> 
<a hre 全 "六 > 数字 博物 馆 ， 创 教育 资源 价值 最 大 化 
«fili 
<a href="#"> PRLI VRP 网 络 三 维 虚拟 展 馆 
«ili 
<ahre 全 "六 > 网 络 三 维 虚拟 展 馆 的 特性 及 前 景 
«i-i 
<a hre 全 "六 > 清 明 节 黄 帝 陵 三 维 虚 拟 祭 祖 [ 视 频 ] 
«lli 
«ul 
</div> 


«div class-"n vr more" 
<a hre 人 ="#'>&gt:&gt; 更 多 </a> 
</div> 
</div> 


«div class-"n vr" 
<div class-"n vr tp" 
<a href="#"><img src-"images/yx banner] jpg" alt=" 


</div> 
<div class="n_vr_wz"> 
<ul> 
<> 
<a href="#"> rp A TK E 
«lili 
<a href="#"> KEE KEN 
«fili» 
<a hre 全 "> 用 4D 电影 传递 科普 知识 
«fllii» 
«a href="#"> MAROKE IR 
<i> 
</ul> 
</div> 


<div class="n_vr_more"> 
<a href="#'>&gt;&gt; 更 多 </a> 
</div> 
</div> 
«div class="n_vI"> 
«div class="n_vr_tp"><img src-"images/gy bannerl.jpg" 
«div class-"n vr wz"> 
<ul> 
<i> 
<a href="#"> EPR VRAE 
«nili 
<ahre 会 "六 > 虚拟 仿真 双向 锁 设备 实例 
«lili 
<a href" >L FH be BEP UEL 
«lili» 
<a hre 全 "各 > 变压器 分 接 开 关 仿真 系统 
«i 
<l> 
</div> 
<div class="n_vr_more"> 
<a href"#">&gt:&gt; 更 多 </a> 
</div> 
</div> 
<div class="n_vr"> 
<div class="n_vr_tp"> 
<a href="#"><img src-"images/ar bannerl jpg" a> 
</div> 
«div class="n_vr_wz"> 
<ul> 
<> 
<a href="#"> IL RSK AE AR 
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«lili 


<a href="#">PC 端 增强 现实 软件 平台 


<><i> 


<a hre 伍 "#'> 移 动 端 增强 现实 软件 


«Ilii 


<a href="#"> [d 4i ERR SIC NE 


«fli 
ul 
</div> 
<div class-"n vr more" 


-ahref-"&gt&gt 更 多 </a> 


</div> 
</div> 
«div class-"n vrl" 
«div class-"n vr tp" 


<a href="#"><img src-"images/vr banner] jpg" alt-" VR 医疗 " /></a> 


</div> 
<div class="n_vr_wz"> 
<ul> 
<li> 


<a hre 全 "六 > 治病救人 ， 虚 拟 现实 我 看 行 


«li^ 


<a href "#l">VR 与 医疗 的 结合 ， 


<i><l> 


心理 疾病 


<a hre 伍 "#"> 虚 拟 现实 模拟 手术 让 医疗 


<Ai><i> 


<a href="#"> VR 应 用 于 虚拟 人 体 解 剖 、 手 术 训 练 <a> 


«hi 
«/ul- 
</div> 


«div class="n_vr_more"> 


<a href="#">&gt:&zgt; 更 多 </a> 


</div> 
</div> 
</div> 
</div> 
</div> 
</article> 


在 article 元 素 内 部 ， 包 括 两 大 部 分 ， 第 一 部 分 是 名 为 imgPlay 的 div 元 素 ， 用 来 展示 轮 


播 图 ， 而 其 中 
库 ， 限 于 篇 幅 在 此 不 做 讨论 ， 感 兴趣 的 读者 可 以 
接 下 来 的 8 个 <div class="n_vr">， 以 方块 形状 的 





Ph<script></scrip 亿 标签 对 中 的 代码 ， 用 于 控制 轮 播 图 的 播放 (这 部 分 使 用 了 jQuery 





阅读 相关 资料 ， 对 此 部 分 的 代码 进行 分 析 ); 
图 文 形式 展示 了 8 个 行业 的 解决 方案 和 相关 





资讯 。 这 些 相 列表 元 素 与 列表 元 素 的 样式 代码 如 下 : 
n vr( width:234px; float:left; background:#fff, borderbottom:1px solid #d3d3d3; margin:33px 8px 0 0; 


display:inline;} 
n vr tp{ width:234px:} 
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an vr Wz{ width:234px; padding:10px 0 15px 0; overflow:hidden:} 

an vr wz ul li (background:url(images/wz icol jpg) left no-repeat; line-height:26px; float:left; width:220px: 
margin-left: 1 4px; display:inline; text-indent: lOpx:) 

an vr wzulli a( display:block:; 

an vr wzulli a:hover( background:url(images/wz ico2.jpg) left no-repeat; color:#28a7el:} 

n vr more{ width:220px; padding:0 14px 10px 0; line-height:20px; text-align:right:j 


n vr more af color:#28a7e1;} 


18.3.5 ”构建 版 权 信息 
页 面 最 底部 是 版 权 信息 显示 部 分 ， 该 部 分 的 显示 效果 如 图 18-12 所 示 。 


Mu ril 





该 部 分 被 放置 在 一 个 footer 元 素 中 ， 因 为 没有 使 用 标题 ， 所 以 没有 显示 在 大 纲 中 。 
这 部 分 代码 相对 来 说 比较 简单 ， 只 需要 使 用 一 个 div 元 素 ， 然 后 在 其 中 放 入 版 权 信息 即 可 。 
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- 节 讲 述 了 如 何 将 HTMLS 中 新 增 的 结构 元 素 与 CSS3 样式 结合 在 一 起 ， 以 创建 结构 
POP. 更 加 具有 语义 、 更 具 现 代 风 格 的 企业 网 站 。 本 节 将 结合 Web 应 用 程序 中 的 一 个 示 
例 页 面 ， 向 读者 介绍 在 下 一 代 Web 应 用 程序 的 页 面 中 ， 如 何 使 用 HIMLS 中 新 增 的 元 素 、 其 
他 功能 以 及 CSS3 样式 。 

本 节 介 绍 的 示例 页 面 是 一 款 手机 阅读 器 的 阅读 页 面 ， 效 果 如 图 18-13 所 示 ， 该 页 面 分 为 
上 中 下 3 个 部 分 。 其 中 ， 上 部 分 是 手机 导航 条 ， 单 击 “ 返 回 书架 ”可 以 返回 到 书架 页 面 ， 中 
间 是 小 说 内 容 显 示 区 域 ， 底 部 是 常用 工具 条 ， 其 中 显示 了 “目录 ” “字体” 和 “夜间 ”模式 
切换 按钮 。 


18.4.1 使 用 到 的 技术 


基于 安全 方面 的 考虑 ， 手 机 阅读 器 中 要 显示 的 小 说 内 容 存 放 在 服务 器 端 。 页 面 需要 向 服 
务 器 发 送 请 求 ， 获 取 小 说 的 章节 目录 和 每 一 章 的 内 容 ， 这 里 用 到 了 JSONP 技术 、JSON 数据 
解析 和 BASE 64 编码 技术 。 限 于 篇 幅 ， 这 里 简单 介绍 一 下 概念 ， 感 兴趣 的 读者 可 以 查阅 其 他 
相关 书籍 或 资料 。 

1. JSONP 技术 

JSONP(JSON with Padding) 是 JSON 的 一 种 “使 用 模式 ” 可 用 于 解决 主流 浏览 器 的 跨 域 
数据 访问 的 问题 。 由 于 同 源 策略 ， 一 般 来 说 位 于 serverl.testcom 的 网 页 无 法 与 不 是 
serverl.test.com 的 服务 器 沟通 ， 而 HTML 的 <script> 元 素 是 一 个 例外 。 利 用 <scrip 亿 元素 的 这 
个 开放 策略 ， 网 页 可 以 得 到 从 其 他 来 源 动态 产生 的 JSON 数据 ， 而 这 种 使 用 模式 就 是 所 谓 的 
JSONP。 用 JSONP 抓 取 到 的 资料 并 不 是 JSON， 而 是 任意 JavaScript, H JavaScript 直译 器 执 
行 而 不 是 用 JSON 解析 器 解析 。 
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2. JSON 数据 解析 

JSON 是 一 种 能 够 取代 XML 的 数据 结构 ， 和 XML 相 比 ， 更 小 巧 但 描述 能 力 却 不 差 。 由 
于 小 巧 ， 通 过 网 络 传输 数据 将 减少 更 多 流量 ， 从 而 加 快速 度 ， 因 此 成 为 目前 数据 交互 中 流行 
的 数据 格式 。JSON 就 是 一 串 字 符 ， 只 不 过 元 素 会 使 用 特定 的 符号 进行 标注 : 


























e (: 双 括 号 表示 对 象 

e [] 方 括号 表示 数组 

e "s 双 引号 内 是 属性 或 值 

e :: 冒号 表示 后 者 是 前 者 的 值 (这 个 值 可 以 是 字符 串 、 数 字 ， 也 可 以 是 另 一 个 数组 或 
对 象 ) 


例如 ，{"name": "Michael"} 可 以 理解 为 是 一 个 包含 name 为 Michael 的 对 象 ， 而 [{"name": 
"Michael"},{"name": "Jerry"}] 就 表示 包含 两 个 对 象 的 数组 。 当 然 也 可 以 使 用 {"name":["Michael", 
"Jerry"]} 来 简化 ， 这 是 一 个 拥有 一 个 name 数组 的 对 象 。 

3. BASE-64 编码 技术 

Base-64 编码 是 从 二 进 制 转换 到 字符 的 过 程 ， 可 用 于 在 HTTP 环境 下 传递 较 长 的 标识 信 
息 。 例 如, 在 Java 持久 化 系统 Hibemate 中 ,就 采用 Base-64 编码 来 将 一 个 较 长 的 唯一 标识 符 
(一 般 为 128 位 的 UUID) 编 码 为 一 个 字符 串 ， 用 作 HTTP 表单 和 HTTP GET. 请 求 中 的 参数 。 
在 这 个 示例 中 ， 为 了 保证 内 容 的 安全 性 ， 防 止 小 说 内 容 被 人 直接 抓 取 ， 因 此 对 传输 的 内 容 采 


用 Base-64 编码 ， 经 解码 后 ， 再 显示 到 页 面 中 。 


江 暖 心 垂下 眼 眸 ， 看 似 十 分 恭敬 ， 可 












对 于 今日 之 事 ， 江 旭 十 分 生气 ， 所 以 


他 明知 道江 若 雪 武 功 不 错 ， 还 放任 她 去 攻 
击 江 暖 心 ， 因 为 在 他 看 来 ， 今 天 若 不 是 江 
暖 心 多 事 ， 七 皇子 就 不 会 误 认 江 若 雨 ， 江 
若 雪 的 婚姻 也 就 不 会 泡汤 ， 所 以 一 切 都 是 
江 暖 心 的 错 ! 


然而 令 江 旭 没 想到 的 是 ， 这 一 场 他 心 
目 中 武 学 天 才 和 碍 材 的 较量 ， 却 以 奏 材 那 
边 压倒 性 的 胜利 而 告终 ， 看 着 江 若 雪 肿 的 
跟 猪 头 似 的 脸 ， 江 坦 的 眼珠 子 几乎 都 快要 
瞪 出 来 了 ， 这 到 底 是 怎么 回 事 ? 他 只 是 瞬 
了 下 眼睛 ， 怎 么 结果 就 变 成 这 样 了 ? 





图 18-13 “手机 阅读 器 


18.4. HTML 页 面 代码 分 析 


首先 来 详细 分 析 阅 读 器 页 面 的 HTML 代码 , 该 页 面 中 的 所 有 控件 在 页 面 打 
功能 描述 如 表 18-1 所 示 。 


是 一 直 在 观察 她 的 白 子 涵 却 在 她 灵动 的 眼 
pe MERNE 


白 子 涵 不 由 睐 了 睐 眼 ， 隐 去 了 眼底 的 
趣味 ， 他 的 这 个 表妹 ， 似 乎 确实 和 以 前 不 
一 样 了 ， 他 倒 要 看 看 ， 接 下 来 她 究竟 是 想 
要 做 什么 





的 阅读 页 面 




















-时 的 状态 及 
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表 18-1 示例 页 面 中 的 控件 及 功能 





























序号 功能 备注 

1 返回 书架 div 返回 书架 ， 书 架 页 面 未 实现 

目录 查看 目录 章节 ， 本 例 未 实现 
目录 图 标 img png 图 片 ，base-64 编码 格式 

" 字体 设置 字体 
字体 图 标 img png 图 片 ，base-64 编码 格式 

3.1.1 大 button “字号 ” 子 项 

32 背景 div 设置 背景 颜色 

4 夜间 图 标 png 图 片 ，base-64 编码 格式 
白天 图 标 ZEE png 图 片 ，base-64 编码 格式 

5 白天 div 白天 模式 

F | button | 切换 到 下 一 章 

8 正文 内 容 正文 显示 区 域 





该 例 的 HTML 代码 如 下 : 
«IDOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset="utf-8"> 
«meta name-"viewport" content-"width-device-width,initial-scale-1 user-scalableno.minimal-ui" 
«meta name-"format-detection" content-"telephone-no" 
</head> 
<body> 
<div class-"loading-mask" id="init_loading"> 
«div class="loading-icon"></div> 
</div> 
<div class="container" id="root"> 
«div id-"fiction chapter title"></div> 
«div class-"m-artical-action'- 
«div class-"artical-action-mid" id-"action mid"></div> 
</div> 
<div id-"fiction container" class="m-read-content"></div> 
<div class="top-nav" id="top-nav" style="display:none"> 
<div class="top-nav-warp"> 
<div class="icon-back"></div> 
«div class="nav-title" id="nav_title"> 
返回 书架 
</div> 
</div> 
</div> 
<div class-"top-nav-pannel-bk font-container" id-"font-container" style="display:none"></div> 
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«div class-"top-nav-pannel font-container" id-"font-container" style="display:none"> 
«div class="child-mod"> 
<span> 字 号 </span> 
<button id-"large-font" class="spe-button"> 
大 
</button> 
<button id-"small-font" class="spe-button" style="margin-left:10px;"> 
小 
</button> 
</div> 
<div class="child-mod" id="bk-container"> 
<span> 背 景 </span> 
</div> 
</div> 
<div class="m-button-bar" id-"bottom tool bar" style-"display:none:padding-bottom:70px;" 
<ul class-"u-tab" id-"bottom tool bar ul"> 
<li id-"prev button" > 
上 前 
«i» 
<li id-"next button" style-"border-right:none" 
下 一 章 
«li 
«ul 
</div> 


<div class="bottom-nav-bk bottom nav" style="display:none"></div> 


«div class-"bottom-nav bottom nav" style-"display:none"^ 
«div class-"item menu-button" id-"menu button" 
«div class-"item-warp" 
«div class="icon-menu"></div> 
<div class="icon-text"> 
目录 
</div> 
</div> 
</div> 
<div class="item" id="font-button"> 
<div class="item-warp"> 
<div class="icon-ft"></div> 
<div class="icon-text"> 
字体 
</div> 
</div> 
</div> 
<div class="item" id="night-button"> 
<div class="item-warp" style="display:none" id="day_icon"> 
<div class="icon-day"></div> 
<div class="icon-text"> 
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白天 
</div> 
</div> 
<div class="item-warp" id="night icon"> 
<div class="icon-night"></div> 
<div class="icon-text"> 
夜间 
</div> 
</div> 
</div> 


</div> 


«div class-"loading" id="loading" style="display:none"> 
正在 加 载 中 -…. 
</div> 
<div class-"m-tool-bar-mask" id-"tool bar mask" style="display:none"></div> 
«ul -"menu-container chapter-list" id-"menu container" style-"display:none"—/ul- 
<div class-"menu-mask" id-"menu mask" style-"display:none"-—/div- 
«div class-"mask" id-"mask" style="display:none"></div> 
</div> 
</body> 
</html> 


18.4.3 CSS3 样式 代码 分 析 


接 下 来 介绍 示例 页 面 使 用 的 CSS3 样式 代码 。 该 样式 代码 中 值得 特别 注意 的 有 以 下 几 点 : 

e 为 了 加 快 图 标的 加 载 ， 对 用 到 的 图 标 图片 使 用 Base-64 编码 格式 ， 使 用 background 
属性 作为 背景 图 片 加 载 ， 而 不 是 使 用 img 元 素来 指定 图 标 。 

o 使 用 nth-child(2n-1) 选 择 器 来 指定 目录 列表 中 奇数 行 的 背景 色 , nth-child(2m) 选 择 器 则 
用 于 指定 偶数 行 的 背景 色 。 

该 页 面 使 用 的 CSS3 样式 代码 如 下 : 


<style type="text/css"> 

html { 
width: 100%; 
height: 100%; 
overflow-x: hidden; 

5 

body { 
text-align: left; 
width: 10096; 
-webkit-tap-highlight-color: rgba(0.0.0..05); 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
background: &e9dfc7: 
overflow: hidden: 

H 


.m-read-content { 
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font-size: 14px; 
color: £555; 
line-height: 31px; 
padding: 15px; 

} 

mr-read-content h4 { 
font-size: 20px; 
color: #736357; 
border-bottom: solid 1px #736357; 
margin: 0 0 lem 0; 
letter-spacing: 2px; 

} 

.m-read-content p { 
text-indent: 2em; 
margin: 0.5em 0; 
text-align: justify; 
letter-spacing: 0px; 
line-height: 24px; 

} 

.artical-action-top { 
position: fixed: 
top: 0px; 
height: 30%; 
width: 10096; 
z-index: 90; 

} 

.artical-action-mid { 
position: fixed: 
top: 3096; 
height: 4096; 
width: 10096; 
z-index: 10002: 

j 

.artical-action-bottom { 
position: fixed: 
bottom: Opx; 
height: 30%; 
width: 100%; 
z-index: 90: 

5 

.m-tool-bar ( 
text-align: center; 
width: 10096: 
height: 40px; 
position: fixed; 
bottom: Opx: 
z-index: 10000: 


.m-tool-bar-mask ( 


) 


text-align: center; 
width: 10096; 
height: 40px; 
position: fixed: 
bottom: 0px; 
z-index: 9999: 
background: #000; 
opacity: .9; 


.menu-mask ( 


y 


width: 100%; 
height: 100%; 
position: fixed; 
z-index: 9999; 
background: #000; 
opacity: .8; 

top: 0px 


.mr-tool-button { 


} 


padding: 5px 15px; 
margin-top: 7px; 

border: 1px fff solid; 
background: transparent; 
color: #fF 


-top-nav { 


} 


position: fixed: 
top: 0px; 

height: 50px; 
background: #000; 
width: 10096; 
opacity: 1: 
z-index: 10004 


-top-nav-warp { 


} 


position: relative; 
max-width: 900px; 
margin: 0 auto; 


.top-nav-pannel-bk { 


position: fixed; 
bottom: 70px; 
height: 135px; 
background: #000; 
width: 100%; 
color: Zfff 
opacity: 0.9; 
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z-index: 10003 

} 

-top-nav-pannel { 
position: fixed: 
bottom: 70px; 
height: 135px; 
background: none; 
width: 100%; 
color: fif. 
z-index: 10004 

) 

-top-nav-pannel button { 
background: none; 
border: 1px #8c8c8c solid; 
padding: 5px 40px; 
color: Zfff; 
display: inline-block; 
border-radius: 16px; 

j 

-top-nav-pannel .bk-container ( 
position: relative; 
height: 30px; 
width: 30px; 
background: £fff 
border-radius: 15px; 
display: inline-block; 
vertical-align: -14px; 
margin-left: 10px; 

} 

-top-nav-pannel .bk-container-current { 
position: absolute; 
height: 32px; 
width: 32px; 
border-radius: 16px; 
display: inline-block; 
vertical-align: -14px; 
margin-left: 10px; 
border: 1px #ff7800 solid; 
top: -2px; 
left: -12px; 

5 

-top-nav-pannel .bk-container span ( 
position: absolute; 
top: 32px: 
left: -8px: 
display: block: 
font-size: 12px: 
width: 40px; 


} 


-bottom-nav-bk { 


} 


position: fixed; 
bottom: Opx; 
height: 70px; 
background: #000; 
width: 100%; 
opacity: .9; 
z-index: 10004 


-.bottom-nav ( 


} 


position: fixed: 
bottom: 0px; 
height: 70px; 
background: none; 
width: 100%; 
opacity: 1; 
z-index: 10004: 
margin: 0 auto; 
text-align: center 


.bottom-nav .item { 


} 


display: inline-block: 
width: 32%; 

color: 4flf. 
text-align: center; 
margin: 0 auto; 


m-button-bar { 


} 


text-align: center; 
font-size: 14px; 
padding: 5px: 
margin: 10px; 
max-width: 900px; 
margin: 0 auto; 
width: 70% 


.m-button-bar button { 


} 


background: none; 
border: 1px #000 solid: 
padding: 5px 10px; 


nav-title { 


position: absolute: 
top: 16px; 

left: 42px: 

color: #d5d5d6 
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-top-nav button { 
width: 65px; 
font-size: 12px; 
background: none: 
border: 1px #d5d5d6 solid; 
padding: 5px 10px; 
color: #d5d5d6; 
position: absolute; 
top: 11px; 
border-radius: 16px 0 0 16px; 
opacity: 0.9 

} 

.child-mod { 
padding: 5px 10px; 
margin-top: 15px 

) 

.child-mod span { 
display: inline-block; 
padding-right: 20px: 
padding-left: 10px; 

} 

arge-font p { 
font-size: 18px 

} 

.small-font p { 
font-size: 14px 

} 

.menu-container { 
height: 60%; 
position: fixed; 
bottom: Opx; 
width: 100%; 
overflow: scroll; 
background: #fff, 
display: block: 
z-index: 19999 

} 

.chapter-list { 
text-align: left; 

} 

.chapter-list li { 
padding: 15px: 

} 

.chapter-list li:nth-child(2n-1) { 
background-color: #ededed 

} 

-chapter-list li:nth-child(2n) { 


background-color: #e6e6e6 


.chapter-list .free ( 


f 


float: right; 


fiee { 


} 


color: £459c3a; 


loading ( 


} 


position: fixed; 
text-align: center; 
width: 10096; 
top: 40%; 

color: fif. 
z-index: 199999 


.u-tab { 


} 


position: relative; 

height: 34px; 

margin: 10px auto; 
line-height: 34px; 
border-radius: 8px; 
border: 1px solid 4858382; 
font-size: 13px; 
background: #000; 
opacity: 0.9; 


utab li ( 


display: inline-block; 

width: 49%; 

font-size: 13px; 

border-right: 1px solid #858382; 
-webkit-box-sizing: border-box; 
text-align: center; 

color: #fE: 


mask { 


} 


position: fixed: 
width: 10096: 
height: 100%; 
z-index: 12000; 
top: 0; 

bottom: 0; 

left: 0; 

right: 0; 

opacity: .4; 
background: #000; 


.buy-mask { 
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} 


height: 10096; 

width: 10095; 
position: fixed; 

top: Opx; 

text-align: center; 
margin: 0 auto; 
display: none: 
z-index: 10001; 
background: #e9dfc7; 


Aeon-back { /返回 书架 


j 


position: absolute; 

top: 14px; 

left: 10px; 

width: 23px; 

height: 23px; 

background: url(data:image/png;base64,iVBORwOK……);// 省 略 base-64 格式 代码 
background-size: contain; 


Acon-text ( 


} 


position: absolute; 
top: 25px: 
font-size: 10px; 


.icon-menu, .icon-ft, .icon-night, icon-day { 


) 


position: absolute; 

top: 3px: 

left: 2px: 

width: 18px; 

height: 13px; 

background: url(data:image/png:base64,iVBOR-----)://44W& base-64 格式 代码 
background-size: contain; 


Acon-night, .icon-day, .icon-ft ( 


} 


left: 1px; 


Acon-ft ( 


} 


width: 20px; 
height: 13px; 

background: url(data:image/png;base64.iVBOR);//44 H5 base-64 格式 代码 
background-size: contain; 


„current .icon-ft ( 


top: 2px: 

left: Opx: 

width: 22px; 

height: 15px; 

background: url(data:image/png;base64.iVBOR);//44 H% base-64 格式 代码 


} 


background-size: contain; 


.icon-day { // 白 天 图 标 


) 


width: 19px; 
height: 18px; 
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background: url(data:image/png;base64.iVBOR-—);/44H4 base-64 格式 代码 


background-size: contain; 


icon-night {// 页 面 图 标 


} 


left: 4px; 
width: 16px; 
height: 16px; 


background: url(data:image/png;base64,j VBOR --- 


background-size: contain; 


Atem-warp { 


} 


width: 26px; 
margin: 0 auto; 
position: relative; 


-loading-icon { 


$ 


margin: 0 auto; 
margin-top: 50%; 


CC);// 省 上 略 base-64 格式 代码 


background: url(data:image/gif:base64,R01IGO……);// 省 略 base-64 格式 代码 


width: 20px; 
height: 20px; 


loading-mask ( 


) 


text-align: center; 
margin: 0 auto; 
width: 10096; 
height: 10096; 
background: #000; 
opacity: 0.1; 
position: fixed: 
top: Opx: 


.buy-container { 


b 


width: 100%; 
position: fixed; 
top: 2096; 
text-align: center; 
margin: 0 auto; 
display: none: 
z-index: 10003 


-buy-container h3 ( 


font-weight: normal; 
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line-height: 30px; 

font-family: microsoft yahei, arial, helvetica, sans-serif 
} 
-buy-container h2 { 

padding-bottom: 80px; 
} 


-buy-container button { 
font-family: microsoft yahei, arial, helvetica, sans-serif; 
font-size: 14px; 
height: 40px; 
line-height: 40px; 
border: none; 
color: fff; 
padding: 0 10px; 
width: 160px; 
background: #4a90b1; 
margin-top: 10px; 

} 

.m-read-content ( 
min-height: 300px; 
max-width: 900px; 
margin: 0 auto; 

} 

-buy-popup-frame { 
display: none; 
position: fixed; 
bottom: 0px:; 
left: Opx; 
width: 100%; 
height: 266px; 
z-index: 39999 

j 

</style> 


18.4.4 JavaScript 脚本 代码 分 析 


本 节 主 要 讲解 JavaScript 脚本 代码 。 首 先 讲解 一 下 章节 列表 和 内 容 都 会 用 到 的 数据 格式 。 
1. 数据 格式 
小 说 章节 和 内 容 数 据 存放 在 JSON 文件 中 。 
小 说 章节 存放 在 chapterjson 文件 中 ， 该 文件 的 内 容 格式 如 下 : 
"msg": "成 功 "， 
"result": 0, 
"chapters": [ 
{ 
"price": 0, 
"chapter id": 0, 
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"word count": 2348, 
"free": true, 
"title": "第 001 章 " 


h 
{ 
"price": 0, 
"chapter id": 1, 
"word count": 2266, 
"free": true, 
"title": "第 002 章 " 
} 
} 
"title": "豪门 宠 婚 " 
} 
小 说 每 一 章 的 内 容 存 放 在 dataXjson 文件 中 ， 例 如 datal json、data2.json、data3 json 等 ， 
格式 如 下 : 
í 


"msg": "RIJ", 

"result": 0, 

"jsonp": "http://html.read.duokan.com/mfsv2/secure/s010/60009/file?nonce=74c8522cfd8546fd8e2ab 
346366d24d0&ctoken=89GiFGpK01J7WSSnxEHnjoU435w7sJdY EntshdzDbZLgSoyHzWOcfbMWIqJ4TfqoE 
Ta58Q9VLD9jJcCAMS70a0uRTgC6JG9Poed648pU41U&sig-TtG7TCFvAIKLctffbvFC-iXwIoE" 

} 
2. JavaScript 函数 说 明 
示例 页 面 的 JavaScript 脚本 代码 中 的 主要 核心 函数 及 功能 说 明 如 表 18-2 所 示 。 


表 18-2 示例 页 面 的 核心 函数 及 功能 说 明 











函数 功能 说 明 
main( ) 整个 JavaScript 脚本 代码 的 入 口 
RenderBaseFrame(container) 用 于 页 面 基 本 展示 框架 的 绘制 
ReaderModel(id , cid , onChange ) 获得 小 说 内 容 
getBSONP(url, callback) 解密 内 容 数 据 


JavaScript 脚本 引用 的 库 文 件 有 zepto.min.js、jquery.base64.js、jqueryjsonpjjs。 其中, zepto 
库 针 对 移动 端 程序 提供 了 一 些 基本 的 触摸 事件 ， 可 以 用 来 做 手机 触摸 屏 交 互 ，jQuery 是 一 个 
JavaScript 库 ， 用 于 简化 JavaScript 编程 。 关 于 这 些 库 的 知识 ， 这 里 不 做 过 多 介绍 ， 感 兴趣 的 
读者 可 以 阅读 相关 资料 。 
这 些 库 的 引用 代码 如 下 : 
«script src="lib/zepto.min.js"></script> 
<script> 
window jQuery = $; 
</script> 
<script src-"s/jquery.base64 js" —/script- 
<script src-^js/jquery.jsonp js" —/script- 
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3. 完整 的 JavaScript 脚本 代码 
示例 页 面 的 完整 JavaScript 脚本 程序 如 下 : 
<script> 
(function() ('use strict'; 
var Util = (function() ( 
var prefix = 'ficiton reader '; 
var StorageGetter — function(key) ( 
retum localStorage.getItem(prefix + key); 
} 
Var StorageSetter = function(key, val) { 
return localStorage.setItem(prefix + key, val); 
} 
/数据 解密 
function getBSONP(url, callback) { 
retum $jsonp({ 
url : url, 
cache : true, 
callback : "duokan fiction chapter", 
success : function(result) ( 
var data = $.base64.decode(result); 
var json = decodeURIComponent(escape(data)); 
callback(json); 


» 

kh 

retum ( 
getBSONP : getBSONP 
StorageGetter : StorageGetter, 
StorageSetter : StorageSetter 

} 

90: 


/阅读 器 获得 内 容 的 方法 
function ReaderModel(id ,cid , onChange ) ( 
var Title = "": 
var Fiction id— id ; 
var Chapter id— cid ; 
if (UtilStorageGetter(Fiction id--'last chapter?) ( 
Chapter id= Util.StorageGetter(Fiction 1d + "last chapter"); 
} 
if(!Chapter id) ( 
Chapter id= 1; 
} 
var Chapters = []; 
var init = function() { 
getFictionInfoPromise.then(function(d) { 
gotoChapter(Chapter id); 


» 

} 

var gotoChapter = function(chapter id) { 
Chapter id= chapter id; 


getCurChapterContent(); 
D: 
/获得 当前 章节 内 容 


var getCurChapterContent = function() ( 
$.get("data/data" + Chapter id + "json", function(data) { 
if (data.result — 0) ( 
var url = data jsonp; 
Util.getBSONP(url, function(data) { 
S$(#init loading")hide(): 
onChange && onChange (data); 


h 
var getFictionInfoPromise = new Promise(function(resolve, reject) { 
$.get("data/chapter.json", function(data) { 
if (data.result — 0) ( 
Title = data.title; 
S$(#nav_title”).html( 返 回 书架 "); 
window.ChaptersData = data.chapters; 
window.chapter data = data.chapters; 
for (var i = 0; i < data.chapters.length; i++) ( 
Chapters push(( 
"chapter id" : data.chapters[i].chapter id, 
"title" : data.chapters[i].title 
» 
} 
resolve(Chapters); 
} else { 
reject(data); 
} 
}, son); 
J: 
/获得 上 一 章 内 容 
var prevChapter = function() ( 
Chapter id = parseInt(Chapter id); 
if (Chapter id— 0) { 
retum 
} 
var cid = Chapter id - 1; 
gotoChapter(cid): 
Util.StorageSetter(Fiction id + "last chapter', Chapter id); 
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/获得 下 一 章 内 容 
var nextChapter = function() ( 
Chapter id = parseInt(Chapter id). 
if (Chapter id — Chapters.length - 1) { 
retum 
} 
var cid = Chapter id+ 1; 
gotoChapter(cid); 
Util.StorageSetter(Fiction id + last chapter', Chapter id); 


retum ( 
init : init, 
go : gotoChapter, 
prev : prevChapter, 
next : nextChapter, 
getChapter id : function() ( 
return Chapter id: 
} 
h 
} 
// 夯 一 下 基本 的 展示 框架 
function RenderBaseFrame(container) { 
function parseChapterData(jsonData) { 
var jsonObj = JSON.parse(jsonData); 
var html = "<h4>" + jsonObj.t + "</h4>"; 
for (var i= 0; i < jsonObj.p.length: i++) { 
html += "<p>" + jsonObj p[i] + "</p>"; 
j 
return html; 
} 
return function(data) { 
container.html(parseChapterData(data)); 
h 
} 
// 主 函数 
function main() { 
/ 获取 fiction id 和 chapter id 
var RootContainer = S('&fiction container); 


varFiction id, Chapter id: 
/ 绑 定 事件 

var ScrollLock = false: 

var Doc = document; 

var Screen = Doc.body; 
var Win = $(window); 

/ 是 否 夜 间 模 式 

var NightMode = false: 

/ 初始 化 的 字体 大 小 
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var InitFontSize; 
/| DOM 节点 的 缓存 
var Dom - ( 
bottom tool bar: $(#bottom tool bar), 
nav title : $('#nav title"), 
bk container : $(?bk-container), 
night button : S(night-button"), 
next button : $(?next button"), 
prev button: S(&prev button"), 
back button : S( back button"), 
top nav : $(#top-nav’), 
bottom nav : $('.bottom nav) 
) 
/ 程序 初始 化 
var readerUIFrame = RenderBaseFrame(RootContainer); 
/获得 章节 数据 并 展示 
var readerModel = ReaderModel(Fiction id || 13359, Chapter id, function(data) ( 
readerUIFrame(data); 
Dom.bottom tool barshow(); 
setTimeout(function() { 
ScrollLock — false; 
Screen.scrollTop = 0; 
}, 20); 
D: 
/阅读 器 数据 内 容 的 展示 
readerModel.init(); 
// 对 从 缓存 中 读 取 的 信息 进行 展示 
var ModuleFontSwitch = (function() { 
/字体 和 背景 的 颜色 表 
var colorArr = [ (value : #f7eee5',name : UK ['1' font : "}, (value : 'fe9dfc7' name : 纸张 
font : "id : "font normal"), (value : '£a4a4a4' name : ' 浅 灰 ,font : "}, (value : '#cdefce' name : 护腿 'font : "}, 
{value : '#283548',ame : Kil" font : '47685a2'bottomcolor : fff), {value : #0f1410',name : ' 夜 间 'font : 
#4e534f,bottomcolor : 'rgba(255,255.255.0.7) id : "font night") ]: 
var tool bar = Util.StorageGetter(toolbar background color"); 
var bottomcolor = Util.StorageGetter('bottom color"); 
var color = Util.StorageGetter(background color); 
var font = Util.StorageGetter('font color); 
var bkCurColor = Util.StorageGetter( background color"): 
var fontColor = Util.StorageGetter(font color); 
for (var i = 0; i < colorArr.length; i) { 
var display = 'none': 
if (bkCurColor = colorAnm[i].value) { 
display ="; 
3 
Dom.bk container.append('-div class-"bk-container" id=" + colorAm[i]id +" 
data-font-" + colorAn[i]font + "  data-bottomcolor-" + colorArm[i|.bottomcolor + " data-color-" + 
colorAn[i].value + " style-"background-color' + colorAn[i].value + "><div class-"bk-container-current" 
style-"display:' + display + "></div><span style-"display:none"^' + colorArr[i].name + '</span></div>'); 
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H 
RootContainer.css(min-height', S(window).height() - 100); 
if (bottomcolor) { 
$('#bottom tool bar ul")find('li).css('color', bottomcolor); 
} 
if (color) ( 
S('body").css('background-color, color); 
} 
if (font) { 
S$('.m-read-content").css('color', font); 
$ 
/夜间 模式 
if (fontColor — #4e534f) ( 
NightMode = true; 
S$(*iday icon").show(); 
S( night icon)hide0); 
$('#bottom tool bar ul').css('opacity', '0.6'); 


} 

// 字 体 设置 信息 

InitFontSize = Util.StorageGetter('font size"); 

InitFontSize = parseInt(InitFontSize); 

if (UInitFontSize) { 

TnitFontSize — 18; 

} 

RootContainer.css('font-size', InitFontSize); 
90: 


/页 面 中 零散 交互 事件 的 处 理 
var EventHandler = (function() { 


/夜间 和 白天 模式 的 切换 
Dom night button.click(function() ( 
if (NightMode) ( 
S(&day icon')hide(): 
S$(#night icon.show(): 
S(**font normal")trigger('click"): 
NightMode = false; 
} else t 
$(#day_icon').show0; 
S$(#night icon)hide(): 
S(#font_night’).trigger(click’): 
NightMode = true; 
} 
D: 
/字体 和 背景 颜色 的 处 理 罗 辑 


Dom.bk container delegate(' bk-container', 'click', function() ( 
var color = S(this).data('color); 
var font = S(this).data('font"): 
var bottomcolor = S(this).data('bottomcolor; 
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var tool bar = font; 
Dom.bk container.find('.bk-container-current).hide(); 
S(this).find('.bk-container-current).show(); 
if(!font) ( 
font = £000": 
} 
if(!tool bar) { 
tool bar = #fbfefe'; 
} 
if (bottomcolor && bottomcolor != "undefined") { 
S$(#bottom tool bar ul".find(li").css('color', bottomcolor); 
J else ( 
S$(#bottom tool bar ul".find('li").css('color', '#a9a9a9'); 
5 
S('body").css('background-color', color); 
S$(-m-read-content").css('color', font); 
Util.StorageSetter('toolbar background color tool bar); 
Util.StorageSetter(bottom color, bottomcolor); 
Util.StorageSetter('background color, color): 
Util.StorageSetter('font color, font); 
var fontColor = Util.StorageGetter('font color"); 
// 夜 间 / 白 天 模式 切换 逻辑 
if (fontColor = '#4e534f) ( 
NightMode = true; 
S(*iday icon').show(); 
S(Znight icon").hide(): 
S$(#bottom tool bar ul").css('opacity', '0.6'); 
} else { 
NightMode = false: 
S(*day icon")hide(); 
S(*night icon').show(); 
S$(#bottom tool bar ul").css('opacity', '0.9"); 
h 
»: 
/按钮 的 多 态 样式 效果 
$('.spe-button').on('touchstart', function() { 
S(this).css('background','rgba(255.255.255.0.3)): 
J).on(touchmove', function() ( 
S(this).css('background', 'none"): 
J).on('touchend', function() { 
S(this).css(background', 'none"); 
3 
// 放 大 字体 的 处 理 逻 辑 
S(*Harge-font").click(function() { 
if (InitFontSize > 20) { 
retum; 
H 
InitFontSize += 1; 


*360* 


HTML5+CSS3 网 页 设计 基础 教程 








UtlStorageSetter(font size", InitFontSize); 
RootContainer.css('font-size', InitFontSize); 


»: 
// 缩 小 字体 的 处 理 逻 辑 
SC#small-font') .click(function() { 
if (InitFontSize < 12) ( 
retum; 
j 
TnitFontSize = 1; 
Util.StorageSetter('font size', InitFontSize); 
RootContainer.css('font-size', InitFontSize); 
» 


var font container = $('.font-container"); 
var font button = $('font-button"); 
var menu container = S('&menu container); 
U "P" TERI RERIGEAR 
font button.click(function() ( 
if (font container.css( display) 一 none!) {// T7R/KE OE 4H 
font container.show(): 
font button.addClass('current'); 
} else { 
font_container.hide(); 
font button.removeClass('current"); 
} 
D: 
RootContainer.click(function() 也 默认 隐藏 “字体 ”按钮 
font container.hide(): 
font button.removeClass('current'); 


D 
/对 屏幕 的 滚动 监控 
Win.scroll(function() { 
Dom.top nav.hide(): 
Dom.bottom nav.hide(): 
font container hide(): 
font button.removeClass('current"); 
D: 
/章节 翻 页 
Dom next button.click(function() (// F— 9i 
readerModel.next(): 
»: 
Dom prev button.click(function() {// 上 一 页 
readerModel.prev(); 
3x 
/返回 上 级 页 面 
Dom.back button.click(function() {// 返 回 小 说 介绍 页 (本 例 未 实现 ) 
if(Fiction id) ( 
location.href = '/book/ + Fiction id; 
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»: 
/返回 首页 
Dom.nav title.click(function() { 
location.href — '/: 
» 
S(icon-back?).click(function() { 
location.href — '/: 
» 
S(imenu button").click(function() { 
location.href = '#'; 
DD; 
// 屏 幕 中 央 事 件 ， 按 下 的 时 候 显示 项 部 导航 栏 和 底部 工具 栏 
$(#action mid").click(function() { 
if (Dom-top_nav.css{'display') = 'none") ( 
Dom bottom navshow0: 
Dom.top nav.show(); 
} else ( 
Dom.bottom nav.hide(); 
Dom.top nav.hide(); 
font container.hide(); 
font button.removeClass('current"); 


185 本 章 小 结 


本 章 首 先 从 业务 发 展 角度 介绍 了 HTMLS 的 应 用 现状 和 发 展 趋势 。 由 于 HTMLS 技术 属 
于 前 端 技术 ， 而 前 端 又 恰好 是 网 站 开发 流程 中 的 一 环 ， 因 此 紧 接着 向 读者 介绍 了 整个 网 站 的 
开发 流程 ， 以 使 读者 明白 整个 网 站 项 目的 开发 流程 以 及 前 端 在 流程 中 所 处 的 位 置 。 最 后 ， 根 
据 主流 的 HTMLS 应 用 场景 ， 向 读者 提供 了 两 个 示例 : 一 个 示例 是 经 典 的 企业 网 站 开发 ， 男 
一 个 示例 是 手机 APP 的 开发 。 通 过 本 章 的 内 容 及 前 面 章节 介绍 的 知识 ,读者 应 能 够 对 HTMLS 
和 CSS3 的 整个 知识 体系 有 一 个 整体 性 的 认识 ， 对 Web 开发 流程 以 及 前 端 在 整个 流程 中 所 处 
的 位 置 有 一 个 明确 的 认识 ， 并 能 够 利用 这 些 知识 来 开发 基本 的 Web 页 面 和 手机 页 面 。 
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